IE6下拉问题

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除<a>标签外,IE6不支持.这是尝试在IE6中支持此类事情的主要问题之一,这也是CSS菜单在IE6开始失去大量市场份额之前并未真正流行的原因之一.

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

最着名的是Whatever:悬停.这是非常简单的安装(IE的特定CSS的一小部分),并且问题是固定的,只要IE6用户没有关闭Javascript.

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

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

最后一点:由于这是一个特定于IE6的问题,您可能希望使用条件注释或类似的东西来确保它只在IE6中运行.否则你可能会让IE7和IE8变得更糟!(我不确定,因为这个hack是在IE7发布之前编写的,而且我现在也没有使用它了很多年).