如何在IE7中設置下拉菜單項的背景顏色寬度？

我有以下的導航欄：http://jsfiddle.net/jajq3/embedded/result/如何在IE7中設置下拉菜單項的背景顏色寬度？

對於後人，這是結構：

<div id="navBar"> 
    <ul style="float: left; padding-left: 5px;"> 
     <li> 
      <a href="#">A</a> 
     </li> 
     <li> 
      <a href="#">B</a> 
     </li> 
     <li> 
      <a href="#">C</a> 
      <ul> 
       <li><a href="#">This is a thing.</a></li> 
       <li><a href="#">Cool man</a></li> 
       <li><a href="#">Linus</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">D</a> 
      <ul> 
       <li><a href="#">Gerg.</a></li> 
       <li><a href="#">Weeeeeeeeeeeeeeeeeeeeee</a></li> 
       <li><a href="#">asdf idiot</a></li> 
       <li><a href="#">blah</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

正如你所看到的，當你將鼠標懸停在下拉菜單鏈接，後面的鏈接更改背景顏色。但在IE7中，背景並沒有一直延伸到下拉菜單的邊緣;它只會到鏈接文本的邊緣。在現代瀏覽器中，這沒有被觀察到。那麼我怎麼才能在IE7中工作呢？

在回答之前，請注意我不想爲下拉菜單明確設置寬度。目前，下拉菜單鏈接決定了下拉菜單的寬度，這就是我希望它保持的方式。（例如，D的下拉菜單應該總是比C的寬，因爲它具有非常長的「Weeeeeeeeee」鏈接）

來源

2013-05-15 XåpplI' -I0llwlg' I -

你應該擺脫對#navBar > ul > li > ul > li設置的樣式，只是讓列表項是列表項。然後它們自動地與它們包含的ul一樣寬。

然後，如果你在li而不是在a上:hover設置background-color，該background-color填補了菜單的整個寬度。

這裏是一個jsFiddle embedded result link這將工作在IE7。

擺脫該位的CSS的：

~~#navBar > ul > li > ul > li { width: 100%; clear: left; display: block; }~~

而在你的CSS底部的類分成兩個部分：

#navBar > ul > li:hover > ul > li:hover 
{ 
    background-color: #999; 
} 
#navBar > ul > li:hover > ul > li:hover > a 
{ 
    color: white; 
}

來源

2013-05-22 08:38:36

謝謝。儘管我發現從'#navBar> ul> li> ul> li'簡單地刪除'width：100％'也可以。 –

不用擔心，我沒有想到這一點，我想你會希望'a'元素填滿整個寬度，所以你不妨在'a'元素上保留'background-color'，因爲用戶可以點擊整個列表項來導航，而不是僅在鏈接上導航。我一定累了，沒有想直，很好，你把它修好了:) –

-1

您需要將自定義IE7樣式表添加到項目並添加特殊填充。

<!-- [if IE 7]> 
<style rel="text/css"> 
    myMenu li { 

    padding-left: 10px; 
    padding-right: 10px; 
    } 
</style> 
<![endif]-->

來源

2013-05-15 14:23:38

我不不知道額外填充將如何使每個下拉鍊接的背景延伸到下拉菜單的邊緣？什麼是myMenu？ –

如何在IE7中設置下拉菜單項的背景顏色寬度？

回答

相關問題