水平导航栏在 IE6 中不起作用

Question

我的水平导航栏在 Chrome、Opera、Mozilla，甚至 IE8 上都可以正常工作，但在 IE6 上却不起作用。

代码如下：

HTML 部分

<div id="mainNav" class="container">
  <div id="menuh">
    <ul>
      <li><a href="index.html" class="top_parent">Home</a></li>
      <li><a href="about.html" class="top_parent">About Us</a></li>
      <li><a href="why_us.html" class="top_parent">Why Us?</a>
        <ul>
          <li><a href="services.html" class="parent">What I can do for you</a></li>
          <!-- No need to anchor to [#ancService1] -->
          <li><a href="services.html#ancWhatyouget" class="parent">What you can get</a></li>
          <li><a href="services.html#ancTestimonials" class="parent">Testimonials</a></li>
        </ul>
      </li>
      <li><a href="free_resources.html" class="top_parent">Free Resources</a></li>
      <li><a href="how_much.html" class="top_parent">How Much?</a></li>
      <li><a href="contact.html" class="top_parent">Contact</a></li>
      <li><a href="register.html" class="top_parent">Register</a></li>
    </ul>
  </div>
</div>

CSS 部分

#mainNav {height: 30px;}

#menuh {
    font-size: 0.9em;
    width:80%;
    float:left;
    position: absolute;
}

#menuh a {
    text-align: center;
    display:block;
        white-space:nowrap;
    margin:0;
    padding: 3px 15px 3px 15px;
    border-right: 1px solid #036; 
    height: 24px;
}

#menuh a:visited, #menuh a:active {
    color: white;
    text-decoration:none;
}
#menuh a.parent:link {
    color: white;
    background-color: #204988;
    text-decoration:none;
}

#menuh a.top_parent {
    background-position: right center;
    background-repeat: no-repeat;
    height: 24px;
    padding: 10px 15px 0 15px;
}
#menuh a.top_parent:hover {
    color: #8CBA01;
    text-decoration:none;
    background-image: url(../_images/img_nav.jpg);
    background-repeat: repeat-x;
}

#menuh a.parent {
    background-position: right center;
    background-repeat: no-repeat;
    height: 24px;
    padding: 7px 15px 0 15px;
}
#menuh a.parent:hover {
    color: #8CBA01;
    background-color: #036;
    text-decoration:none;
}
#menuh ul {
    list-style:none;
    margin:0;
    padding:0;
    width: auto;
}
#menuh li {
    float:left;
    position:relative;  
}

#menuh li li a {
    text-align: left;
    width: 140px;
}

#menuh ul ul {
    position:absolute;
    z-index:500;
    top:auto;
    display:none;
}

div#menuh li:hover {
    cursor:pointer;
    z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul
{display:block;}

任何帮助都会很棒！ 谢谢。

Answer 1

如果您没有说明您的问题是什么，我不确定这就是原因，但 :hover 伪选择器仅在 IE6 中的 a 标记上受支持。

Answer 2

看看你的样式规则，发生的事情有点令人困惑，所以我做了一个应该可以工作的jsfiddle，它包括使悬停在 IE6 上工作所需的 jquery 以及一个问题：列表子菜单显示与 li水平 - 你必须自己弄清楚如何解决该部分。我更改了应用的标记和样式规则，使其更加简单： http://jsfiddle.net/2p7cx/

Answer 3

@Rfvgyhn 是正确的。在 IE6 中，:hover 仅适用于 a 元素。

为了解决这个问题并让 div#menuh li:hover 等功能正常工作，最简单的解决方案是使用 JavaScript 修复：

Whatever:hover - http://peterned.home.xs4all.nl/csshover.html