Question

我知道ie6有一个问题：悬停visibilty和子选择器，但是看不出为什么我的子菜单没有掉线？我已经包含了代码，如果有人能告诉我我的错误在哪里，我将不胜感激？这是在之前的帖子中收到的回复的后续内容。你会注意到我已经尝试过htc文件行为，这也不适用于我。谢谢

<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>


body    {

    behavior: url(csshover3.htc);
}

#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:inline-block ;
    height: 100%;
    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:inline-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 {
    display:block;
    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:none;
    padding: 6px 5px 6px 5px;
    height: 15px;
    float: none;
    width:145px;
    background: none;
    font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;

}

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

Answer 1

如果您的内容已经在锚标记周围，您可以尝试更改CSS以将悬停属性附加到锚点而不是li。但是，它可能仍然存在问题。

如果这不起作用，请尝试将display：inline-block添加到锚标记。否则你将不得不用javascript破解它。

<li><a>content</a></li>

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

}


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

}

这样的事情。除了锚标签之外的任何东西的悬停属性在早期版本的IE中都是有问题的。您也可以尝试这样的事情：

http://www.danvega.org/blog/index.cfm/2008/1/1/CSS-hover-selector

Answer 2

您需要为IE6使用一些Javascsript。

li:hover是你的问题。 IE6仅支持悬停在锚标签上（可能还有一些表单元素，我现在不记得了，但肯定不是<li> s）

Answer 3

请注意您已使用Whatever:hover ..

如果没有在IE6中进行实际测试，我可以看到一个问题：

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

使用>（direct child selector），即not implemented in IE6。

尝试使用ul.nav-main li:hover ul或ul.nav-main li:hover .nav-sub替换该选择器。

IE6中的菜单列表没有掉线

3 个答案: