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

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

Answer 2

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

Answer 3

我记得IE6有

的问题

a:hover property on NON <a> elements

通常必须在单独的调用中使用javascript来修复它。

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

Answer 4

尝试使用jquery live方法而不是悬停

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

下拉菜单在IE6中不起作用

5 个答案: