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

如果没有你说明你的问题是什么，我不确定这是什么原因，但只有IE6中:hover标签支持a伪选择器。

Answer 2

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

要解决此问题并允许div#menuh li:hover之类的内容生效，最简单的解决方案是使用JavaScript修补程序：

无论如何：悬停 - http://peterned.home.xs4all.nl/csshover.html

Answer 3

查看你的样式规则，它有点令人困惑，所以我做了一个应该工作的jsfiddle，它包含了使IE6上的悬停工作所需的jquery以及一个问题：list子菜单显示与李水平 - 你必须弄清楚如何自己解决这个部分。我更改了应用的标记和样式规则更直接：http://jsfiddle.net/2p7cx/

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

HTML部分

CSS部分

3 个答案: