Question

IE6中的

菜单显示为子菜单。我拍摄了一些照片来证明这个问题。根据超级预测，所有元素都有布局，看不出问题所在。我会很感激一些建议，因为我不具备css经验，因此我的帖子。非常感谢。

屏幕抓取：

http://img36.imageshack.us/i/ie8menugrab.png/

http://img546.imageshack.us/i/ie6menugrab.png/

HTML

<div id="headermenu">


      <ul id="navigation" class="nav-main">
        <li><a href="http://www.somedomain.com/">Home</a></li>
        <li class="list"><a href="#">Freebies</a>
      <ul class="nav-sub">
        <li><a href="http://www.somedomain.com/category/backgrounds/">Backgrounds</a></li>
        <li><a href="http://www.somedomain.com/category/buttons/">Buttons</a></li>
        <li><a href="http://www.somedomain.com/category/graphics/">Graphics</a></li>
        <li><a href="http://www.somedomain.com/category/html-css/">HTML &amp; CSS</a></li>
        <li><a href="http://www.somedomain.com/category/icons/">Icons</a></li>
        <li><a href="http://www.somedomain.com/category/psd/">PSD</a></li>
        <li><a href="http://www.somedomain.com/category/templates/">Templates</a></li>
        <li><a href="http://www.somedomain.com/category/tutorials/">Tutorials</a></li>    
      </ul>
        </li>

        <li class="list"><a href="#">About</a>
      <ul class="nav-sub">
        <li><a href="http://www.somedomain.com/about/">AboutUs</a></li>
        <li><a href="http://www.somedomain.com/commercial-use/">Commercial Use</a></li>
        <li><a href="http://www.somedomain.com/about/terms-of-use/">Terms Of Use</a></li>
      </ul>
      </li>

        <li><a href="http://www.somedomain.com/advertise/">Advertise</a></li>
        <li><a href="http://www.somedomain.com/contact/">Contact</a></li>


    </ul>


  </div>

HEADER MENU CSS

#headermenu  {

  width: 999px;
  height:51px;
  margin: 0 auto;
  /*background-image: url(../images/headermenu.gif);*/
    background-position: center center;
  background-repeat: no-repeat;
}

MENU CSS

#navigation {
    margin:0;
    padding: 0;
    clear:both;
    width:999px;
    height:51px;
    background: #d6eaf8 url(../images/dropdown-bg.gif) repeat-x left top;
}


ul.nav-main,
ul.nav-main li {
    list-style: none;
    margin: 0;
    padding: 0;
}


ul.nav-main {
    position: relative;
    z-index: 597;
}

ul.nav-main li:hover > ul {
    visibility: visible;
}


ul.nav-main li.hover,
ul.nav-main li:hover {
    position: relative;
    z-index: 599;
    cursor: pointer;
    background: url(../images/dropdown-bg-hover.gif) repeat-x left top;
}



ul.nav-main li {
    float:left;
    display:block;
    height: 51px;
    color: #999;
    font: 14px Tahoma, Verdana, Arial, Helvetica, sans-serif;
    background: url(../images/separator.gif) no-repeat right center;
}

ul.nav-main li a {
    display:block;
    padding: 16px 16px 0 16px;
    height: 35px;
    color: #fff;
    font: 14px Tahoma, Verdana, Arial, Helvetica, sans-serif;
    text-decoration:none;
}

ul.nav-main li a:hover {
    color:#D6D6D6;
}



ul.nav-main *.list {
    padding-right: 22px;
    background: url(../images/navigation-arrow.gif) no-repeat right top;
}



ul.nav-sub {
    visibility: hidden;
    position: absolute;
    padding:10px;
    top: 48px;
    left: 0;
    z-index: 598;
    background: #353535 url(../images/dropdown-list-bg.gif) repeat-x left top;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;

}


ul.nav-sub li {
    list-style:none;
    display:block;
    padding: 0;
    height: 27px;
    float: none;
    width:145px;
    border-bottom: 1px solid #5a5a5a;
    background: none;
}

ul.nav-sub li a {
    list-style:none;
    display:block;
    padding: 6px 5px 6px 5px;
    height: 15px;
    float: none;
    width:145px;
    background: none;
    font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;   
}

Answer 1

您的代码包含以下内容：

ul.nav-main li:hover > ul { ... }

您正在使用IE6不支持的直接子选择器（>）。

此外，IE6仅支持:hover元素上的<a>，因此li:hover在IE6中无效。

幸运的是，有一种解决方法，就是一种名为Whatever:Hover的HTC文件。

要使用Whatever：Hover，请从上面链接的页面下载htc文件，然后将以下内容添加到CSS中：

body {
    behavior:url("scripts/csshover.htc");
}

（最好在样式表的顶部以便于阅读，但它应该在哪个CSS文件中无关紧要）

希望有所帮助。

Answer 2

尝试再使用一条规则：

ul.nav-sub{
    display:none;
}

ul.nav-main li:hover ul.nav-sub {
    display:block; /* OR display:list-item */
}

Answer 3

更改ul.nav-main li a规则：

将display设为inline-block
将height设为100%。

这种方式布局是正确的但在IE6中菜单会有点太高（双填充错误）。我不知道这是如何影响下拉列表的，因为我只在SuperPreview中测试过它。

Lex是对的，使用display:none/block代替visibility:hidden/visible进行子菜单。

IE6中的菜单列表没有掉线

3 个答案: