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

Question

我有一段时间没有做CSS，我只是想创建一个非常简单的导航菜单，但我遇到了困难。我想我可能会让事情变得复杂。

以下是我所拥有的图片：

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

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

我尝试了很多不同的方法，但如果没有其他一切看错，我似乎无法做到正确。

CSS / HTML：

#navigation {
    width: 75%;
}

#navigation ul{
    list-style-type: none;
    padding:0;
    margin:0;
    color: white;
}

.nav a {
    display: block;
    padding:10px;
    color:white;
    border:0;
    text-align:center;
}

#navigation ul > li {
    display:inline-block;
    float:left;
    width:12.5%;
    background-color: #244C5A;
}

#navigation ul > li > ul {
    width:400%;
    clear:both;
}

#navigation ul > li > ul > li  {
    width: 25%;
    display:block;
}

#navigation ul > li > ul > li > a  {
    padding:5px 0 5px 0;
}


#navigation ul > li > ul > li > ul > li{
    clear:both;
    font-size:10pt;
}

ul.lowerNav li {
    margin-top:10px;
}

        <div id="navigation">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">AX Project</a></li>
                <li><a href="#">Communication</a></li>
                <li><a href="#">Information</a></li>
                <li><a href="#">Online Forms</a></li>
                <li><a href="#">Departments</a>
                    <ul>
                        <li><a href="#">Marketing</a>
                            <ul>
                                <li><a href="#">Our Press Releases</a></li>
                                <li><a href="#">Our Brochures</a></li>
                                <li><a href="#">Our Photography</a></li>
                                <li><a href="#">Our Adverts</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Health & Safety</a>
                            <ul>
                                <li><a href="#">COSHH Database</a></li>
                                <li><a href="#">Documents</a></li>
                            </ul>
                        </li>
                        <li><a href="#">IT</a>
                            <ul>
                                <li><a href="#">IT Manuals</a></li>
                                <li><a href="#">Useful IT Documents</a></li>
                                <li><a href="#">Tip of the Week</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sales</a>
                            <ul>
                                <li><a href="#">Documents</a></li>
                            </ul>
                        </li>
                    </ul>
                    
                    <ul class="lowerNav">
                        <li><a href="#">Production</a></li>
                        <li><a href="#">Finance</a></li>
                        <li><a href="#">Human Resources</a></li>
                    </ul>
                </li>
                <li><a href="#">Reporting</a></li>
            </ul>
        </div>

正如我所提到的，我认为我的CSS确实过于复杂，但我不确定如何提高效率。如果有人能给我任何指示，那将是一个巨大的帮助。

谢谢

Answer 1

添加了css类.dropdownMenu，只需检查

.dropdownMenu{
    background-color: #244C5A;
    height: 150px;
    overflow-y: scroll;
    overflow-x:hidden;
}

#navigation {
    width: 75%;
}

#navigation ul{
    list-style-type: none;
    padding:0;
    margin:0;
    color: white;
}

.nav a {
    display: block;
    padding:10px;
    color:white;
    border:0;
    text-align:center;
}

#navigation ul > li {
    display:inline-block;
    float:left;
    width:12.5%;
    background-color: #244C5A;
}

#navigation ul > li > ul {
    width:400%;
    clear:both;
}

#navigation ul > li > ul > li  {
    width: 25%;
    display:block;
}

#navigation ul > li > ul > li > a  {
    padding:5px 0 5px 0;
}


#navigation ul > li > ul > li > ul > li{
    clear:both;
    font-size:10pt;
}

ul.lowerNav li {
    margin-top:10px;
}

<div id="navigation">
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">AX Project</a></li>
                <li><a href="#">Communication</a></li>
                <li><a href="#">Information</a></li>
                <li><a href="#">Online Forms</a></li>
                <li><a href="#">Departments</a>
                    <ul class="dropdownMenu">
                        <li><a href="#">Marketing</a>
                            <ul>
                                <li><a href="#">Our Press Releases</a></li>
                                <li><a href="#">Our Brochures</a></li>
                                <li><a href="#">Our Photography</a></li>
                                <li><a href="#">Our Adverts</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Health & Safety</a>
                            <ul>
                                <li><a href="#">COSHH Database</a></li>
                                <li><a href="#">Documents</a></li>
                            </ul>
                        </li>
                        <li><a href="#">IT</a>
                            <ul>
                                <li><a href="#">IT Manuals</a></li>
                                <li><a href="#">Useful IT Documents</a></li>
                                <li><a href="#">Tip of the Week</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sales</a>
                            <ul>
                                <li><a href="#">Documents</a></li>
                            </ul>
                        </li>
                    </ul>
                    
                    <ul class="lowerNav">
                        <li><a href="#">Production</a></li>
                        <li><a href="#">Finance</a></li>
                        <li><a href="#">Human Resources</a></li>
                    </ul>
                </li>
                <li><a href="#">Reporting</a></li>
            </ul>
        </div>