下拉菜单在 IE6 中不起作用

Question

以下下拉菜单在现代浏览器 (IE7/firefox) 中运行良好，但在 IE6 中则不行。有人可以提出解决办法吗？

CSS：

#menu {
    height: 29px;
    background: url(img/menu.png) repeat-x top;
    border-left: 1px solid #0b2f3e;
    border-right: 1px solid #0b2f3e;
    position: relative;
}

#menu ul {
    display: none;
    position: absolute;
    top: 29px;
    left: 0;
    background: #316f86;
    width: 220px;
    z-index: 10;
}

#menu ul ul {
    top: -1px;
    left: 220px;
    width: 200px;
    border: 1px solid #4a7a8c;
    border-bottom: none;
}

#menu li {
    float: left;
    display: block;
    position: relative;
}

#menu li li {
    float: none;
}

#menu li a {
    float: left;
    display: block;
    color: #fff;
    height: 16px;
    line-height: 16px;
    padding: 7px 20px 6px 20px;
    border-right: 1px solid #0b2f3e;
}

#menu ul li a {
    float: none;
    border-right: none;
    border-bottom: 1px solid #4a7a8c;
}

#menu li a:hover {
    border-bottom: none;
}

#menu ul li a:hover {
    color: #c0e8ff;
    border-bottom: 1px solid #4a7a8c;
}

.menu-bottom {
    background: url(img/menu.png) repeat-x bottom;
}

.menu-top {
    background: url(img/menu.png) repeat-x top;
}

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul{
display:block;
}

#menu img {
    vertical-align: middle;
    overflow: hidden;
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
}

jQuery：（用jquery应该没问题）

// dropdown menu (unlimited sub-levels)
jQuery("#menu ul").css({display: "none"}); // Opera Fix

jQuery("#menu li").hover(
    function(){
        if (jQuery(this).parent().attr("id") == 'menu') {
            jQuery(this).removeClass('menu-top');
            jQuery(this).addClass('menu-bottom');
        }
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(500);

    },
    function(){
        if (jQuery(this).parent().attr("id") == 'menu') {
            jQuery(this).removeClass('menu-bottom');
            jQuery(this).addClass('menu-top');
        }
        jQuery(this).find('ul:first').css({visibility: "hidden"});
    }
);

我确信它与 IE6 处理浮点数/块的方式有关..但就是无法掌握它。

Answer 1

我记得IE6有问题

a:hover property on NON <a> elements

通常必须在单独的调用中使用 javascript 来解决此问题。

这可能会有所帮助：http://www.danvega.org/blog/index.cfm/2008/1/1/CSS-hover-selector

Answer 2

值得看看 Stu Nicholl 的 CSS Play 网站，他的 menus 页面包含数十个示例，其中许多是跨浏览器兼容的，并且包含 IE6。

Answer 3

为什么要重新发明轮子。好的菜单系统是superfish 或suckerfish。在 ie6 等上进行了尝试和测试。

Answer 4

尝试使用 jquery live 方法而不是 hover

jQuery("#menu li").hover -> jQuery("#menu li").live("hover", function()

它可能会解决在 ie6 中未触发悬停的问题

Answer 5

谢谢大家.. 我设法修复了 CSS 并使它与 IE6 一起工作:)

这里是为了以防万一有人需要。

#menu, #menu ul {
    position: relative;
    z-index: 300;
    width: 100%;
}

#menu {
    height: 29px;
    background: url(img/menu.png) repeat-x top;
    border-left: 1px solid #0b2f3e;
    border-right: 1px solid #0b2f3e;
}

#menu ul {
    width: 230px;
    position: absolute;
    display: none;
    top: 29px;
    left: 0;
    background: #316f86;
}

#menu ul ul {
    width: 232px;
    top: -1px;
    left: 230px;
    background: #316f86;
    border: 1px solid #4a7a8c;border-bottom: none;
}

#menu li {
    float: left;
    position: relative;
}

#menu a {
    display: block;
    padding: 9px 20px 8px 20px;
    color: #fff;
    border-right: 1px solid #0b2f3e;
}

#menu li ul a {
    float: left;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #4a7a8c;
    width: 190px;
}

#menu li a:hover {
    border-bottom: none;
}

#menu li ul a:hover {
    color: #c0e8ff;
    border-bottom: 1px solid #4a7a8c;
}

.menu-bottom {
    background: url(img/menu.png) repeat-x bottom;
}

.menu-top {
    background: url(img/menu.png) repeat-x top;
}

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul {display:none;}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul {display:block;}

#menu img {
    vertical-align: middle;
    overflow: hidden;
    width: 16px;
    height: 16px;
    margin: 0 8px 0 0;
}