[Résolu] Sous-menu :hover sous iE9

Bonjour,
J'ai un problème d'affichage d'un sous-menu sous iE9 (iE8?)

Normalement pour les navigateurs moderne je fais ceci:

header nav li:hover > ul {
		max-height: 25em;
		border: 1px solid #F78E1E;
		border-top: 0px;
	}
	header nav ul ul {
		max-height: 0;
		overflow: hidden;
		-webkit-transition: .4s max-height;
		-moz-transition: .4s max-height;
		-o-transition: .4s max-height;
		-ms-transition: .4s max-height;
		transition: .4s max-height;
	}

Mais bien évidement "transition" n'est pas compatible iE9 et moins, j'essaie donc de faire une version pour ces navigateur, mais je n'arrive à rien. Tout ce qui apparaît c'est une rectangle transparent avec un contour orange...

Si quelqu'un pouvais m'aider sur ce coup ça serait grandement apprécié!

mon code pour iE9 jusqu'à maintenant:

#IE9 header nav li:hover > ul, #IE9 header nav ul ul {
		max-height: 25em;
	}
	#IE9 header nav .subMenu{
		max-height: 25em;
		border: 1px solid #F78E1E;
		border-top: none;
		display: none;
		padding: 10px 0;
	}
	#IE9 header nav ul li:hover .subMenu, #IE9 header nav ul li:focus .subMenu{display:block;}

site -www.xcelcam.com

Hello

Théoriquement la transition change rien, si elle n'est pas supportée tu n'as pas l'effet visuel, mais les hauteurs changent quand même. Donc pas besoin de "hack" CSS pour la transition tu peux garder ton code pour IE9.
Par contre tu as du filter sur ton menu + combo avec du overflow : hidden = la zone sous IE9 \0/

Tu peux essayer d'enlever le filter sur .gradient-black et nous dire si ça fonctionne ?

Si c'est ça, faudra un jour que je documente ce bug ^^

Alors là! Je suis sans voix!

J'ai mis le overflow à visible pour ie9 et enlevé le filtre et tout semble bien fonctionner maintenant!

Merci!
Modifié par juliesunset (26 Jun 2013 - 14:45)

Yataaa

Bon, je vais essayer de documenter du coup dès que j'ai un moment.