Question

我的下拉菜單顯示在IE6中有問題。它似乎在IE7和8做工精細任何幫助，將不勝感激

這裏是一個預覽鏈接： http://arrowheadproducts.net.c1.previewmysite.com/2010Nov/index.aspx

這裏是HTML：

<div id="nav"> 
    <div id='leftheader_top'><img src='images/logo2.jpg' /></div> 
<div id="top_nav01"><a id="nav01" href="index.aspx"></a></div> 
    <div id="top_nav02"> 
    <div class='list'> 
    <ul> 
    <li><a id="nav02" href="products.aspx"></a> 
     <ul> 
     <li><a border='0' id="drop_01" href="metalsystemsandproducts.aspx"></a></li> 
     <li><a border='0' id="drop_02" href="compositesystemsandcomponents.aspx"> </a></li> 
     </ul> 
    </li> 
</ul> 
</div> 
</div> 
<div id="top_nav03"> 
<div class='list'> 
<ul> 
    <li><a id="nav03" href="services.aspx"></a> 
     <ul> 
     <li><a border='0' id="drop_02_01" href="engineering.aspx"></a></li> 
     <li><a border='0' id="drop_02_02" href="testing.aspx"></a></li> 
     <li><a border='0' id="drop_02_03" href="manufacturing.aspx"></a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 
</div> 
<div id="top_nav04"> 
<div class='list'> 
<ul> 
    <li><a id="nav04" href="support.aspx"></a> 
     <ul> 
     <li><a border='0' id="drop_03_01" href="warranty.aspx"></a></li> 
     <li><a border='0' id="drop_03_02" href="quality.aspx"></a></li> 
     <li><a border='0' id="drop_03_03" href="aftermarketdistribution.aspx"></a></li> 
     <li><a border='0' id="drop_03_04" href="supplychainmanagement.aspx"></a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 
</div> 
<div id="top_nav05"> 
<div class='list'> 
<ul> 
    <li><a id="nav05" href="company.aspx"></a> 
     <ul> 
     <li><a border='0' id="drop_04_01" href="history.aspx"></a></li>   
     <li><a border='0' id="drop_04_02" href="contacts.aspx"></a></li> 
     <li><a border='0' id="drop_04_03" href="sitemap.aspx"></a></li> 
     <li><a border='0' id="drop_04_04" href="legal.aspx"></a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 
</div> 
</div> 

</div> 

CSS：

.list ul { 
    margin: 0; 
    padding: 0; 
    float: left; 
} 

    .list ul li{ 
    list-style: none; 
} 

    .list ul ul { 
    position: absolute; 
    list-style: none; 
    z-index: 500; 
} 

    .list ul ul a { 
    text-decoration: none; 
} 

    .list ul ul li a:hover { 
    text-decoration: none; 
    display: block; 
} 

    .list ul ul li { 
} 

    .list ul ul li:hover { 
    text-decoration: none; 
    display: block; 
} 

    div.list ul ul { 
    display: none; 
} 

    div.list ul ul, 
    div.list ul li:hover ul ul, 
    div.list ul ul li:hover ul ul 
    {display: none;position:relative;} 

    div.list ul li:hover ul, 
    div.list ul ul li:hover ul, 
    div.list ul ul ul li:hover ul 
    {display: block;position:relative;} 

    div.list img { 
    vertical-align: middle; 
    overflow: hidden; 
    width: 16px; 
    height: 16px; 
    margin: 0 8px 0 0; 
} 

Answer 1

您的代碼包括：.list ul ul li:hover

IE6不支持:hover除了<a>標籤。這是IE6支持這類事情的主要問題之一，也是CSS菜單在IE6開始失去顯着市場份額之前並不真正流行的原因之一。

好消息是，有IE6的黑客支持懸停在任何元素上。最有名的是Whatever:hover。這是非常簡單的安裝（一個簡單的IE特定的CSS），並且問題是固定的，只要IE6用戶沒有關閉Javascript。

黑客通過CSS運行，但實際上是基於Javascript的，所以如果用戶關閉了Javascript，那麼它將無法工作。恐怕你無能爲力，因爲這幾乎是你會得到的唯一解決方案。

一個更好的解決方案就是不再支持IE6--它有很多其他問題，並不是所有的解決方案都有這樣的簡單解決方案。

最後一點：由於這是一個特定於IE6的問題，您可能需要使用條件註釋或類似的東西來確保它僅在IE6中運行。否則，你可能會讓IE7和IE8變得更糟！ （我不確定，因爲這個黑客是在IE7發佈之前編寫的，而且我現在也用了很多年）。

Answer 2

真正的問題是IE6不支持李：懸停支持僅在標籤

所以我們使用jQuery「禮」懸停功能，這將支持所有瀏覽器

<script type="text/javascript"> 
    $('ul#nav li').hover(function() 
       { 
       $(this).find('ul').stop(true,true).slideDown() 
       }, 
       function() 
       { 
       $(this).find('ul').stop(true,true).slideUp() 
}); 
</script> 

檢查此鏈接 http://jsfiddle.net/nPdNd/29/