Bug IE7 - Menu déroulant - [RESOLU]

Slt à tous !

Je rencontre un problème d'affichage sur un menu déroulant vertical. Le menu de 2ème niveau s'affiche mais il est impossible de le sélectionnez (il disparait dès que l'on veut aller sur une rubrique), alors que sur les autres navigateur (safari, IE8, Chrome et Firefox) fonctionne correctement ???

Après multiple recherche sur le net et sur le forum, je n'arrive pas à comprendre mon erreur de css. si quelqu'un aurais une piste à me donner pour que j'arrive à régler ce probléme de CSS

Ci-joint le lien (dans le menu c'est "personnalisation" qui pose problème)
http://www.armacao.fr/custom/fr/esprit-armacao

et le css utilisé

ul#navigation li {float: right; position:relative; font-family: "bebasneue", Arial, Helvetica; font-size:25px; }
ul#navigation li a { padding-left:13px; padding-right: 13px; text-transform:uppercase; margin-left:1px; margin-right:1px; color: #fff;}
ul#navigation li a:hover { background:#4082e2;}
ul#navigation li a.aselect { color: black; background:#fff;}

/* 2e niveau */
ul#navigation ul {	display: none; position: absolute; padding-top: 7px;}
ul#navigation li:hover ul { display: block !important; }
ul#navigation li { margin-top;none !important; }
ul#navigation ul li {margin: 0 ; border-top:1px solid #8cb3ea; background:#4082e2; font-size:18px;}
ul#navigation ul li a {display:block; clear:both; height:auto; float:none; width: 160px; padding: 0.6em 0.2em 0.6em 0.5em; color: #fff; text-align: left; border-right: 0; font-weight:normal;}

merci de votre aide
Modifié par Kweb (18 Feb 2011 - 11:43)

Bonjour,

je crois que ton problème est tout bête : tu as un espace entre ton lien "Personnalisation" sur lequel a lieu le :hover, et ton sous-menu qui apparait. Du coup, lorsqu'on passe sur le lien, le sous-menu apparaît bien, par contre lorsqu'on veut y aller, on sort de la zone du lien, et donc il disparait..

Ca n'est donc pas vraiment une erreur de css, juste IE7 qui conserve sa logique un peu rigide.

Essaies simplement en "collant" ton <ul> au <a>, pour vérifier si mon hypothèse est juste. Si c'est le cas, la meilleure solution sera d'étendre la zone du lien, avec un padding ou une hauteur.

Bonne continuation!

Merci pour ta réponse.... mais malheureusement ça ne vient pas de là !
quelle galère !!!!!

merci

Alors je sèche, à mon avis ça se joue sur la façon dont le <li>, le <a> et le <ul> sont placés et stylés. Je ne saurais être plus précis sans bidouiller par moi-même, malheureusement..

Et si tu laissais tes <li> en hauteur maximum dans la liste, et n'appliquait tes marges qu'à ton <a> ? En plaçant le :hover sur le li, ça pourrait fonctionner.

Bon courage!!

J'ai bien galérer hier soir, mais j'ai enfin trouver.... il fallait que je rajoute dans le css spécifique à IE7 un float:left sur ul#navigation ul li

A quand des navigateurs qui interprèterons le code de la même façon

Merci encore pour ton intervention @+

Intéressant je n'y aurais pas du tout pensé!
Je garde ça en mémoire, bonne continuation!

(Pour les navigateurs... le jour ou google dominera le monde..? )