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

除:hover标记外，IE6不支持<a>。这是尝试在IE6中支持此类事情的主要问题之一，这也是CSS菜单在IE6开始失去重要市场份额之前并未真正流行的原因之一。

好消息是IE6有一些黑客可以支持悬停在任何元素上。

最着名的是Whatever:hover。这是非常简单的安装（IE的特定CSS的一小段），并且问题是修复的，只要IE6用户没有关闭Javascript。

黑客是通过CSS运行的，但实际上是基于Javascript的，所以如果用户关闭了Javascript，那么它将无效。我担心，你无能为力，因为这是你将获得的唯一解决方案。

一个更好的解决方案就是不再支持IE6了 - 它还有很多其他问题，并不是所有问题都有这么简单的解决方案。

最后一点：由于这是IE6特有的问题，您可能希望使用条件注释或类似的东西，以确保它只在IE6中运行。否则你可能会让IE7和IE8变得更糟！（我不确定，因为这个hack是在IE7发布之前编写的，而且我现在已经很多年没用过了。）

Answer 2

真正的问题是ie6不支持li：hover只支持标签

所以我们使用jQuery“li”悬停功能，它将支持所有浏览器

<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/

IE6下拉问题

2 个答案: