背景顏色不填充菜單中的整個單元格

Question

我的導航欄中的背景顏色未填滿整個單元格。它們是菜單底部的一行，保留了頁面背景的顏色。我如何正確填充整個單元格的背景顏色？

這是我做的一個JSFiddle測試。我是JSFiddle的新手，所以我不知道鏈接保持活動狀態的時間。

CSS

.hovermenu ul { 
font: bold 20px Tahoma; 
padding-left: 0; 
padding: 0; 
margin-left: 0; 
height: 20px; 
display:inline-block; 
background-color:red; 
} 

.hovermenu ul li { 
    display: block; 
    position: relative; 
    float: left; 
    margin: 0;   
} 
.hovermenu li ul { display: none; } 
.hovermenu ul li a { 
    display: block; 
    text-decoration: none; 
    color: black; 
    border: 2px solid #000000; 
    padding: 2px 0.5em; 
} 
.hovermenu ul li a:hover 
{ 
background-color:#fdff30; 
border-style: outset; 
} 
.hovermenu li:hover ul { 
    display: block; 
    position: absolute; 
} 
.hovermenu li:hover li { 
    float: none; 
    font-size: 20px; 
} 
.hovermenu li:hover a { background: #EEEEEE; } 
.hovermenu li:hover li a:hover { background: #fdff30; } 
html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */ 
border-style: inset; 
} 

HTML

<div class="hovermenu"> 
     <ul> 
     <li><a href="/index.html">Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="/inventory.html">Inventory</a> 
      <ul> 
      <li><a href="/Trucks/main.html">Trucks</a></li> 
      <li><a href="location.html">Equipment</a></li> 
      <li><a href="location.html">Trailers</a></li> 
      </ul> 
     </li> 
     <li><a href="location.html">Location</a></li> 
     <li><a href="contact.html">Contact Us</a></li> 
    </ul> 
</div> 

Answer 1

您正在使用限制的20像素高度LI，只是從你的CSS刪除了這一行，它會正常工作，是因爲。