下拉菜单在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如何处理花车/ blocks..but就不能得到它的窍门。

Answer 1

为什么要重新发明轮子。良好的菜单系统是superfish或su鱼。尝试和IE6等测试

Answer 2

我记得IE6已与

a:hover property on NON <a> elements 

通常是JavaScript有一个单独的通话将被用于修复问题。

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

Answer 3

这是值得考虑看看斯图尼科尔的CSS Play网站，他menu秒Page持有几十个例子，其中有许多是跨浏览器兼容，包容IE6的。

Answer 4

尝试使用代替悬停

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

它可能会解决与悬停问题在IE6中没有被解雇

Answer 5

感谢所有的jQuery的活法。我设法解决该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; 
}