호버 박스 사이에 공백이 없습니까?

Question

탐색 바를 만들고 있습니다. 내가 원하는 것은 마우스를 올리면 집과 회사 등의 공간이없는 상자/배경색이 표시됩니다.

여기에 http://www.w3schools.com/css/css_navbar.asp의 데모 : 탐색 모음에 있습니다. 감사!

HTML 코드

<li><a href="index.html">Home</a></li> 
<li><a href="aboutus.html">About Us</a></li> 
<li><a href="services.html">Services</a></li> 
<li><a href="projects.html">Projects</a></li> 
<li><a href="contactus.html">Contact Us</a></li> 

</ul> 

</div> 

CSS 코드이 바이올린의

#MenuContainer { 
width:441px; 
float:right; 
overflow:hidden; 
text-align:right; 
    } 

    #MenuContainer #loginContainer { 
width:441px; 
float:left; 
overflow:hidden; 
} 

    #MenuContainer #MenulistContainer { 
width:441px; 
float:left; 
overflow:hidden; 
margin-top:12px; 
    } 

    #MenuContainer #MenulistContainer .menuList li { 
list-style:none; 
display:inline; 
font-family:Arial, Helvetica, sans-serif; 
font-size:10pt; 
padding:0 0 0 10px; 
    } 

#MenuContainer #MenulistContainer .menuList li a { 
color:#000000; 
text-decoration:none; 
} 

#MenuContainer #MenulistContainer .menuList li a:hover { 
background-color:#003e7e; 
text-decoration:#ffffff; 
color:#ffffff; 
padding: 0px; 
list-style-type: none; 

} 

Answer 1

http://jsfiddle.net/g5JKU/

확인합니다.

li에 여백을 없애고 여백에 공백을 추가하십시오.

.menuList > li{float:left;list-style:none;margin:0;padding:0 15px; background-color:green;} 
.menuList > li:hover{background-color:red;}