title: Hover box no whitespace in between?
body: <p>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..</p>
  
  <p>Like here <a href="http://www.w3schools.com/css/css_navbar.asp" rel="nofollow">http://www.w3schools.com/css/css_navbar.asp</a>, in the Demo: Navigation bar. Thanks!</p>
  
  <p>HTML CODE 
        </p>
  
  <pre><code>&lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="aboutus.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="projects.html"&gt;Projects&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="contactus.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS CODE</p>
  
  <pre><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;
  
  }
  </code></pre>