28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je me suis cassée la tête à adapter un petit menu déroulant tout simple qui marche sous IE, FF et Safari. Jusqu'ici pas de problème. Jusqu'à l'arrivée d'IE7. Le menu se déroule bien mais ne se ferme plus quand la souris n'est plus au-dessus. Il faut rafraîchir la page pour que le menu fonctionne bien.

Quelqu'un a-t-il déjà rencontré ce problème et quelqu'un aurait une solution pour le régler ?

le code de mon menu est le suivant :
/* ------- MENU DEROULANT -------*/

#nav, #nav ul {
	float: left;
	width: 730px;
	list-style: none;
	padding:0;
	margin:0;
	text-align:left;
}

#nav a {
	display: block;
	width: 142px;
	text-decoration: none;
}

#nav li {
	float: left;
	}

#nav li a {
	width: 139px;
	background-color:#999;
	font: 11px verdana, sans-serif;
	color:#FFF;
	padding:3px 0 3px 5px;
	border-right:2px solid #FFF;
}


#nav li li:hover {
background:#336666;
}

#nav li ul {
	position:absolute;
	display:block;
	left: -999em;
	width:142px;
	font-weight: normal;
	margin:0;
}

#nav li li {
	width: 139px;
	float:none !important;
	float:inherit;/*pour éviter un petit bug de safari et de IE*/
}



/* ASPECT DU SOUS MENU */
#nav li ul li a {
	float:none;/* IE*/
	font: 11px verdana, sans-serif;
	color:#666;
	background-color:#CCC;
	padding:3px 0 3px 5px;
	border-top:1px dashed #FFF;
	border-right:none;
	margin:0;
}

#nav li ul a:hover {
	background-color:#CC0000;
	color:#FFF;
}


#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul{
	left: auto;
}



avec un petit Javascript :
/*******************FONCTIONS PERMETTANT DE GERER LE MENU DEROULANT ******************************************************/


sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


Merci à tous pour votre aide,
Aurélia.[/i][/i]
Modifié par Fugugirl (07 May 2007 - 15:39)