Html 如何用背景色填充菜单上的剩余空间？

我已经有一段时间没有做CSS了，我只是想创建一个非常简单的导航菜单，但是我被卡住了。我想我可能把事情复杂化了

以下是我所拥有的图像：

请注意，我还没有完成javascript，所以目前它只是静态的

其想法是用户将鼠标悬停在部门上，然后子菜单将显示为矩形。我的问题是，大多数部门名称下面只有1或2个项目，所以当其他部门出现在下面时，会留下一个空白。我想把这个涂上颜色

我尝试过很多不同的方法，但是如果其他方法都不正确的话，我似乎无法做到这一点

CSS/HTML：

#导航{
宽度：75%；
}
#导航ul{
列表样式类型：无；
填充：0；
保证金：0；
颜色：白色；
}
.导航a{
显示：块；
填充：10px；
颜色：白色；
边界：0；
文本对齐：居中；
}
#导航ul>li{
显示：内联块；
浮动：左；
宽度：12.5%；
背景色：#244C5A；
}
#导航ul>li>ul{
宽度：400%；
明确：两者皆有；
}
#导航ul>li>ul>li{
宽度：25%；
显示：块；
}
#导航ul>li>ul>li>a{
填充：5px0 5px0；
}
#导航ul>li>ul>li>ul>li{
明确：两者皆有；
字号：10pt；
}
李洛耶诺夫{
边缘顶部：10px；
}

添加了一个css类

。下拉菜单

，只需检查

。下拉菜单{
背景色：#244C5A；
高度：150像素；
溢出y：滚动；
溢出x：隐藏；
}
#航行{
宽度：75%；
}
#导航ul{
列表样式类型：无；
填充：0；
保证金：0；
颜色：白色；
}
.导航a{
显示：块；
填充：10px；
颜色：白色；
边界：0；
文本对齐：居中；
}
#导航ul>li{
显示：内联块；
浮动：左；
宽度：12.5%；
背景色：#244C5A；
}
#导航ul>li>ul{
宽度：400%；
明确：两者皆有；
}
#导航ul>li>ul>li{
宽度：25%；
显示：块；
}
#导航ul>li>ul>li>a{
填充：5px0 5px0；
}
#导航ul>li>ul>li>ul>li{
明确：两者皆有；
字号：10pt；
}
李洛耶诺夫{
边缘顶部：10px；
}

添加了一个css类

。下拉菜单

，只需检查

。下拉菜单{
背景色：#244C5A；
高度：150像素；
溢出y：滚动；
溢出x：隐藏；
}
#航行{
宽度：75%；
}
#导航ul{
列表样式类型：无；
填充：0；
保证金：0；
颜色：白色；
}
.导航a{
显示：块；
填充：10px；
颜色：白色；
边界：0；
文本对齐：居中；
}
#导航ul>li{
显示：内联块；
浮动：左；
宽度：12.5%；
背景色：#244C5A；
}
#导航ul>li>ul{
宽度：400%；
明确：两者皆有；
}
#导航ul>li>ul>li{
宽度：25%；
显示：块；
}
#导航ul>li>ul>li>a{
填充：5px05