Difficultés avec :hover

Bonjour,

j'ai construits des menus verticaux à plusieurs niveaux, un sous menu se déroulant au survol de l'item parent, seulement, la zone de déclenchement de l'évènement :hover est semble-il faussée, et je ne sais comment palier à sa

JSFIddle

Essayez de dérouler le bandeau sous "Chou-fleur" par exemple, une fois sur deux je déroule le bandeau du dessus... L'évènement :hover est placé sur le <li>.

Lorsque l'on déplace la souris en venant de la droite du menu sur un des items, c'est le <li> du dessus qui semble déclancher le :hover.

J'ai finis par trouver une solution grace à une propriété que je ne connaissais pas : pointer-events

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.normal .dropdown-submenu:hover>.dropdown-menu { max-height:1000px; opacity:1; position:relative; top:0px; left:25px; pointer-events:auto; }   .normal .dropdown-menu { max-height:0em; opacity:0; pointer-events:none; }

---

JSFiddle modifié

Bonjour,
:koi: tu ne voulais pas une compatibilité avec IE9, Transitions et IE9, là c'est pas gagné...

Si, à la base je voulais pouvoir utiliser les transitions avec IE9, mais comme cela impliquait soit de modifier l'architecture de mes menus en me basant sur des checkbox soit reproduire mes transitions en javascript.

Du coup j'ai opté pour deux versions des menus mais aussi du site en général : une version standard avec des menus déroulant au :hover et une version que j'appelle de "compatibilité", qui permet d'utiliser ces mêmes menus mais en les déroulant au clic. Le déroulement au clic fonctionne très bien sans transitions sur IE9. Dans le premier cas c'est uniquement du css et dans le second je viens charger un petit script en Js/Jquery.

D'où ce topic

Néanmoins NoSmoking, même si je sais que j'ouvre beaucoup de topics parfois, je te remercie d'intervenir et de m'apporter ton aide. ;)