Le menu déroulant ne fonctionne pas dans IE6

Question

Le menu déroulant suivant fonctionne très bien dans les navigateurs modernes (IE7/firefox) mais pas dans IE6. Quelqu'un peut-il suggérer une solution?

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: (ne devrait pas être un problème 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"}); 
    } 
); 

Je suis sûr que ses quelque chose avec la façon dont IE6 traite flotteurs/blocks..but ne peuvent tout simplement pas obtenir le coup de lui.

Answer 1

Pourquoi réinventer la roue. Bon système de menu est superfish ou suckerfish. Et testé sur Essayé IE6 etc.

Answer 2

Si je me souviens IE6 a des problèmes avec le

a:hover property on NON <a> elements 

Habituellement javascript devait être utilisé dans un appel séparé pour résoudre ce problème.

Cela pourrait aider: http://www.danvega.org/blog/index.cfm/2008/1/1/CSS-hover-selector

Answer 3

Il vaut la peine de jeter un oeil sur le site Web de Stu Nicholl CSS Play, la page de son menu détient des dizaines d'exemples, dont beaucoup sont multi-navigateurs compatibles et compris IE6.

Answer 4

essayer d'utiliser la méthode jquery en direct au lieu de vol stationnaire

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

il pourrait résoudre le problème avec vol stationnaire pas tiré dans IE6

Answer 5

Merci à tous .. J'ai réussi à fixer le CSS et le faire fonctionner avec IE6 :)

Ici c'est juste au cas où quelqu'un en aurait besoin.

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