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/