Dropdown-Menü funktioniert nicht in IE6

Question

Das folgende Dropdown-Menü funktioniert gut in modernen Browsern (IE7/Firefox), aber nicht in IE6. Kann jemand eine Lösung vorschlagen?

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: (sollte kein Problem mit Jquery sein)

// 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"}); 
    } 
); 

Ich bin sicher, es ist etwas mit, wie IE6 behandelt Schwimmer/blocks..but kann einfach nicht bekommen den Dreh raus haben.

Answer 1

Warum erfinden Sie das Rad neu. Gutes Menüsystem ist superfish oder Suckerfish. Bewährt auf IE6 usw.

Answer 2

Soweit ich mich erinnere IE6 Probleme mit dem

a:hover property on NON <a> elements 

hat Javascript in einem separaten Aufruf verwendet werden Normalerweise hatte das zu beheben.

helfen Dies könnte: http://www.danvega.org/blog/index.cfm/2008/1/1/CSS-hover-selector

Answer 3

Es lohnt sich einen Blick auf Stu Nicholls CSS Play Website, seine menu s Seite hält Dutzende von Beispielen, von denen viele Cross-Browser-kompatibel und inklusive IE6 nehmen.

Answer 4

versuchen, die jquery Live-Methode anstelle von Hover

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

es könnte das Problem mit Hover beheben nicht gefeuert in IE6

Answer 5

Dank all .. ich es geschafft, zu beheben das CSS und es mit IE6 arbeiten lassen :)

Hier ist es nur für den Fall, dass jemand es braucht.

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