Menu déroulant incompatible avec IE8 et peut être 7

Bonjour à tous,

Voila mon petit problème. Je suis entrain de réaliser un menu déroulant en grande partie en css (J'ai d'ailleurs repris la source sur un autre site), mais qui fait appel à JQuery. Le menu déroulant fonctionne très bien sous FF. Mais notre très cher IE8 (j'ironise un peu ), n'en fait qu'a sa tête.



En regardant l'image, lorsque je passe la souris sur "menu 1", dans les 2 navigateurs, le menu se déroule correctement. Mais lorsque je passe la souris sur "élément 2", pour FF c'est ok, mais pas IE.

Mais pour être plus claire, voila le code source html :

<div id="menu-bar">
  <ul id="menu">
    <li><a href="javascript:void(0)">menu 1</a>
       <ul>
	   <li><a href="javascript:void(0)">élément 1</a></li>
	   <li><a href="javascript:void(0)">élément 2</a>
	      <ul>
	        <li><a href="javascript:void(0)">élément 1</a></li>
		<li><a href="javascript:void(0)">élément 2</a></li>
		<li><a href="javascript:void(0)">élément 3</a>
		  <ul>
		    <li><a href="javascript:void(0)">élément 1</a></li>
		    <li><a href="javascript:void(0)">élément 2</a></li>
		    <li><a href="javascript:void(0)">élément 3</a></li>
		  </ul>
	       </li>
	   </ul>
	 </li>
	 <li><a href="javascript:void(0)">élément 1</a></li>
	 <li><a href="javascript:void(0)">élément 3</a></li>
      </ul>
    </li>
  </ul>
</div>

et CSS :

#menu{
    position:absolute;
    display:block;
    margin:0;
    padding:0;
    width:500px;
}

#menu ul{
    position:absolute;
    display:block;
    width:124px;
    padding:0;
}
    
#menu li ul{
	display: none;
    /*visibility:hidden;*/
}

#menu .hover {
	display: block;
	z-index:1000;
	/*visibility:visible;*/
}

#menu li li ul {
    position:absolute;
    margin-left:124px;
    margin-top:-23px;
}
    
#menu li {
    list-style:none;
    width:124px;
    height:auto;
    display:inline;
    display:block;
    float:none;
    float:left;
    margin:0;
    padding:0;
}
    
#menu li li {
    display:block;
    float:none;
}

#menu a {
    text-align:center;
    background-color: #9cf;
    border:1px #666 solid;
    color:#000;
    display:block;
    width:120px;
    text-decoration:none;
    padding:2px 0;
    margin:1px;
}
    
#menu a:hover {
    background-color: #eee;
    border:1px #aaa solid;
}

et le code JS :

$ ( document ).ready ( function ( ) {

	$ ( "#menu-bar li" ).each ( function ( ) {
		$ ( this ).hover ( function ( ) {
			$ ( this ).children ( "ul" ).addClass("hover");
		},
		function ( ) { $(this).children ( "ul" ).removeClass ( "hover" ); } );
	} );
} );

Pour résumer le code, lorsque je passe la souris sur un élément "li", le met à son enfant "ul" la classe "hover". Qui est une règle css "display: block;"

Pouvez-me dire comment résoudre cette incompatibilité ?

Merci beaucoup d'avance.
Modifié par nickleus (02 Jun 2009 - 08:57)

Bon j'ai trouvé une partie de la solution. J'avais oublié que IE n'aimait pas les espaces vides. Mais j'ai un autre problème :



Lorsque je passe aux menus secondaires, j'ai un espace blanc qui s'affiche. Bien sur que sous IE .

le nouveau CSS

#menu{
    position:absolute;
    display:block;
    margin:0;
    padding:0;
    width:500px;
}

#menu ul{
    position:absolute;
    display:block;
    width:150px;
    padding:0;
}
    
#menu li ul{
	display: none;
    /*visibility:hidden;*/
}

#menu .hover {
	display: block;
	/*visibility:visible;*/
}

#menu li li ul {
    position:absolute;
    margin-left:150px;
    margin-top:-23px;
}
    
#menu li {
    list-style:none;
    width:150px;
    height:auto;
    display:inline;
    display:block;
    float:none;
    float:left;
    margin:0;
    padding:0;
}
    
#menu li li {
    display:block;
    float:none;
}

#menu a {
    text-align:center;
    background-color: #9cf;
    border:1px #666 solid;
    color:#000;
    display:block;
    width:149px;
    text-decoration:none;
    padding:2px 0;
    /*margin:1px;*/
}
    
#menu a:hover {
    background-color: #eee;
    border:1px #aaa solid;
}

Vous avez une idée ?

PS: Ça à l'air de fonctionner sous IE8, mais pouvez-vous me dire si sous IE7 ou inférieur ça fonctionne ?

Merci
Modifié par nickleus (02 Jun 2009 - 09:16)