刪除li和li上的額外空間：懸停背景圖像

Question

我已經創建了一個使用背景圖像和懸停效果的導航欄。我試圖學習如何在網站上正確實施它們。

我設計了90％的導航，但是我遇到的問題是，當我將鼠標懸停在其中一個項目上時，懸停圖像不會與原始圖像重疊並創建額外的空間。

CSS：

#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; 
} 

HTML：

<nav id="bg"> 
      <ul id="menu"> 
      <li class="first"> 
      <a href=""> 
      <div class="bar"> 
       <div class="n2">Link 1 </div> 
      </div> 
      </a> 

      </li> 

      <li><a class="" href=""> 
      <div class="bar"> 
       <div class="n2">link 2 </div> 
      </div> 
      </a> 
      </li> 

      <li><a class="" href=""> 
      <div class="bar"> 
       <div class="n2">link 3 </div> 
      </div> 
      </a> 
      </li> 


      <li class="last"><a href=""> 
      <div class="bar"> 
       <div class="n2">link 4 </div> 
      </div> 
      </a> 
      </li> 
</ul> 

</nav> 

演示：http://tinyurl.com/cqus3fb

我一直試圖讓這近3個工作日內！

Answer 1

的問題是與下面的#menu li a:hover規則：

#menu li a:hover { 
    background: url("../images/menu_hover.png") no-repeat scroll right top transparent; 
    color: #FFFFFF; 
    height: 58px; 
} 

你需要你的背景規則更改爲：

background: url("../images/menu_hover.png") no-repeat scroll 0 0 transparent; 

的原因是，在你的後臺速記聲明中，您已設置您的背景位置爲right和top，其中所有其他規則設置爲0和0。所以基本上你的背景是從右側而不是左側定位的，因爲a的寬度是190px，圖像的寬度是180px，所以它看起來好像有10px的間隙。