배경색이 메뉴의 전체 셀을 채우지 않습니다

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

당신이 당신의 CSS에서 해당 줄을 제거하고 잘 작동, 20 픽셀로 LI 높이를 제한하고하는 것이 때문이다.