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

我的水平导航栏在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;}

任何帮助将是巨大的！
谢谢。

最佳答案

查看您的样式规则，这会引起混乱，所以我制作了一个jsfiddle，它应该可以工作，并且它包括使鼠标悬停在IE6上工作所需的jquery以及一个问题：list子菜单显示为li水平-您必须弄清楚如何自己解决该部分。我将应用的标记和样式规则更改为更简单：http://jsfiddle.net/2p7cx/

关于html - 水平导航栏在IE6中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6400229/