title: Remove extra space on li and li:hover background images
body: <p>I have created a navigation bar using background images and hover effects. I'm trying to learn how to implement them properly on a website.</p>
  
  <p>I've designed 90% of the navigation but the problem I'm having is that when I hover over one of the items the hover image doesn't overlap the original and creates extra space.</p>
  
  <p><strong>CSS :</strong></p>
  
  <pre><code>#bg {
      background-color: #EAEAEA;
      width: 761px;
  }
  #menu {
      background-color: #EAEAEA;
      height: 58px;
      list-style-type: none;
      padding-left: 1px;
  }
  #menu li.first a {
      background: url("../images/top_nav_f.png") no-repeat scroll 0 0 transparent;
      height: 180px;
  }
  #menu li a {
      background: url("../images/top_nav_f.png") no-repeat scroll 0 0 transparent;
      float: left;
      width: 190px;
      height: 180px;
  }
  #menu li.first a:hover {
      background: url("../images/menu_hover_f.png") no-repeat scroll 0 0 transparent;
  } 
  #menu li a:hover {
      background: url("../images/menu_hover.png") no-repeat scroll right top transparent;
      color: #FFFFFF;
      height: 58px;
  }
  #menu li.last a {
      background: url("../images/top_nav_n.png") no-repeat scroll 0 0 transparent;
  }
  #menu li.last a:hover {
      background: url("../images/menu_hover_r.png") no-repeat scroll 0 0 transparent;
  }
  .bar {
      margin-right: 38px;
      padding-top: 5px;
      text-align: center;
  }
  .n1, .n2 {
      color: #333333;
  }
  </code></pre>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>  &lt;nav id="bg"&gt;
              &lt;ul id="menu"&gt;
             &lt;li class="first"&gt;
              &lt;a href=""&gt;
              &lt;div class="bar"&gt;
                &lt;div class="n2"&gt;Link 1 &lt;/div&gt;
              &lt;/div&gt;
             &lt;/a&gt;
  
             &lt;/li&gt;
  
              &lt;li&gt;&lt;a class="" href=""&gt;
              &lt;div class="bar"&gt;
                &lt;div class="n2"&gt;link 2 &lt;/div&gt;
              &lt;/div&gt;
               &lt;/a&gt;
               &lt;/li&gt;
  
              &lt;li&gt;&lt;a class="" href=""&gt;
              &lt;div class="bar"&gt;
                &lt;div class="n2"&gt;link 3 &lt;/div&gt;
              &lt;/div&gt;
              &lt;/a&gt;
              &lt;/li&gt;
  
  
               &lt;li class="last"&gt;&lt;a href=""&gt;
              &lt;div class="bar"&gt;
                &lt;div class="n2"&gt;link 4 &lt;/div&gt;
              &lt;/div&gt;
              &lt;/a&gt;
              &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/nav&gt;
  </code></pre>
  
  <p>Demo: <a href="http://tinyurl.com/cqus3fb" rel="nofollow">http://tinyurl.com/cqus3fb</a></p>
  
  <p>I've been trying to get this to work for almost 3 days!</p>