带有 IE6 下拉问题的 CSS答案

【问题标题】：CSS with IE6 Drop Down Issue带有 IE6 下拉问题的 CSS
【发布时间】：2010-12-05 10:11:38
【问题描述】：

我一直致力于使用纯 CSS 建立和运行菜单。除了 IE6，我已经在所有浏览器中都可以使用它。这是我的 CSS。

/**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**
NAVIGATION MENUS
~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**~**/

#topNavigation
{
    width: 750px;
    background-color: #EC2327;
    float: left;
    position: absolute;
    z-index: 10;
}

#footerBar
{
    float: left;
    width: 750px;
    background-color: #EC2327;
}   

#topNavigation ul, #footerBar ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 6em;
    float: left;
}

#topNavigation a, #topNavigation h2, #footerBar a
{
    font-family: Verdana;
    font-size: 12px;
    font-weight: normal;
    color: White;
    text-align: center;
    display: block;
    margin: 0;
    padding: 2px 3px;
    text-decoration: none;
}

#topNavigation h2
{

}

#topNavigation a
{
    color: White;
    background-color: #EC2327;
}

#topNavigation a:hover
{
    color: #EC2327;
    background-color: White;
}

#topNavigation ul ul 
{
    display: none;
    position: absolute;
    width: auto;
    z-index: 500;
}

#topNavigation ul li:hover ul
{
    display: block;
}

这里有一些使用这种 CSS 的 HTML。

<div id="topNavigation">
        <ul>
            <li><h2><a href="#">About Us</a></h2>
                <ul>
                    <li><a href="#">Company Profile</a></li>
                    <li><a href="partners.aspx">Partner's Page</a></li>
                    <li><a href="testimonials.aspx">Testimonials</a></li>
                    <li><a href="#">Environmental</a></li>
                </ul>  
            </li>
        </ul>
</div>

问题是在 IE6 中菜单不会被击落。虽然我能拿到顶级

接受 a:hover 命令它只会改变颜色。我需要做什么才能让下一个级别在悬停时飞开？如果可能的话，我宁愿保留这个纯 CSS。

谢谢，迈克

【问题讨论】：

标签： asp.net html css internet-explorer-6 menu

【解决方案1】：

很遗憾，IE6 仅支持 a 元素上的 :hover 伪类。

查看this article 获取有关如何编写脚本解决问题的一些建议。

【讨论】：

【解决方案2】：

在 IE6 中似乎没有以下效果

#topNavigation ul li:hover ul
{
    display: block;
}

您能否给 2 级 UL/LI 分配一个 css 类，然后为其创建一个选择器？

【讨论】：