html - Hover box no whitespace in between?

Question

i'm making a navigation bar. What I want to do is when hover it will show the box/background color without the space in between of Home and About Us and so on..

Like here http://www.w3schools.com/css/css_navbar.asp, in the Demo: Navigation bar. Thanks!

HTML CODE

<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 CODE

#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/

Check of this fiddle.

Kill the margin on the li and add padding for spacing.

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