如何用背景色填充菜單上的剩余空間？

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>