[RÉSOLU] Problème avec menu au passage de la souris

Bonjour,

J'ai un problème avec un menu horizontale et ses sous menu. Quand on passe la souris sur un menu, le sous menu apparait mais quand on descend sur le sous menu, celui disparait 1 fois sur 2. Le problème est sous Firefox et IE.

Voici le code du menu dans la page :

<div class="menu">
<ul>
<li><a href="../index.php" title="Retour à la page d'accueil">Page Accueil</a></li>
<li><a href="../BD_Fighters/affiche_news.php" title="Voir les News du K-1 / MMA">Les News</a></li>
<li><a href="../BD_Fighters/accueil_k1.php" title="Aller sur la Page d'Accueil du K-1">Accueil K-1<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../BD_Fighters/affiche_histoire_k1.php" title="Voir l' Histoire du K-1">Histoire</a></li>
<li><a href="../BD_Fighters/affiche_resultat_k1.php" title="Voir les Résultats du K-1">Les R&eacute;sultats</a></li>
<li><a href="../BD_Fighters/selection_faceaface.php" title="Voir les Faces à Faces du K-1">Les Faces &agrave; Faces</a></li>
<li><a href="../BD_Fighters/affiche_stat_k1.php" title="Voir les Statistiques du K-1">Les Statistiques</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../BD_Fighters/accueil_mma.php" title="Aller sur la Page d'Accueil du MMA">Accueil MMA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../BD_Fighters/affiche_accueil_resultat.php" title="Voir les Résultats du MMA">Les R&eacute;sultats</a></li>
<li><a href="../BD_Fighters/affiche_liste_combattants_mma.php" title="Voir les Combattants de MMA">Les Combattants</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../BD_Fighters/affiche_videos.php" title="Voir les Vidéos">Les Vid&eacute;os</a></li>
<li><a href="../BD_Fighters/affiche_lien.php" title="Voir la Selection de Liens">Les Liens</a></li>
<li><a href="#" title="Les Partenaires du Site">Les Partenaires<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://www.kombatko.com" title="Aller sur le site Kombat KO" target="_blank">Free Fight</a></li>
<li><a href="http://www.mma-france.net" title="Aller sur le Forum MMA-FRANCE" target="_blank">Forum MMA FRANCE</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../BD_Fighters/identification.php" title="Aller sur la Partie Admin">Partie Admin</a></li>
</ul>
</div>

Et voici son CSS associé :

.menu {width:1050px; height:32px; font-size:0.85em; position:relative; z-index:100;border-right:1px solid #000;}
/* hack to correct IE5.5 faulty box model */
* html .menu {width:1051px; w\idth:1050px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:131px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;width:131px;position:relative;}
/* style the links for the top level */
.menu a, .menu a:visited {display:block; font-size:11px; text-decoration:none; color:#fff; width:131px; height:30px; border:1px solid #000; border-width:0px 0px 0px 1px;
background:#D60000; padding-left:2px; line-height:29px;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:131px; w\idth:120px;}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#D60000 bottom right no-repeat;}
/* style the second level hover */
.menu ul ul a.drop:hover{background:#D60000; bottom right no-repeat;}
.menu ul ul :hover > a.drop {background:#D60000; bottom right no-repeat;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}
/* another hack for IE5.5 */
* html .menu ul ul {top:30px;t\op:31px;}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#D60000; color:#000; height:auto; line-height:1em; padding:5px 5px; width:120px;border-width:0 1px 1px 1px;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#fff; background:#7C7A80;}
.menu :hover > a, .menu ul ul :hover > a {color:#fff;background:#7C7A80;}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }

Il s'agit du menu en haut sur mon site : Planète MMA

Si quelqu'un connait la raison, merci de m'aider
Modifié par lebanner (11 Jun 2008 - 10:17)

Bonjour,

À vue de nez, il semblerait que le top de ton .menu ul ul ne soit pas positionné assez haut. Résultat lorsque le pointer descend vers le sous menu, il passe par l'arrière-plan, ce qui supprime le hover. Rien de plus logique en fait. Cela devrait se résoudre en réduisant le top de ce .menu ul ul

Merci beaucoup !!!!!

C'est exactement ça, j'ai passé le top de 31px à 30px et ça marche nikel !

Encore merci pour la rapidité de ta réponse et tes compétences.