下拉菜單在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; 
}