[Résolu] Menu déroulant sous Firefox et Opera

Bonjour,
Après avoir mis en ligne une ébauche de site pour tester le responsive design (http://epidote.pagesperso-orange.fr/), je m'attelle à son amélioration. J'ai suivi le tuto de Pompage pour un menu déroulant fonctionnel avec IE6 : et ça marche, mais pas avec Firefox ou Opera ! Sur IE6 les items du sous-menu apparaissent bien verticalement au survol de la souris (grâce au code javascript) mais sous FF et Opera, les items sont en ligne. J'ai beau comparer le code sur Pompage et le mien, je ne vois pas de différence, mais j'ai quand même dû gaffer quelque part...

Voici les codes html et css :

html :

	<div id="nav" class="clear">
		<ul id="menu" class="clear">
			<li><a href="index.html">Accueil</a></li>
			<li><a href="#">Sites&nbsp;tests</a>
					<ul>
						<li><a href="enattente.html">Pixels&nbsp;fixes</a></li>
						<li><a href="enattente.html">Responsive&nbsp;design</a></li>
					</ul>
			</li>	
			<li><a href="references.html">Bien&nbsp;utiles...</a>
			</li>	
		</ul>
	</div><!--ferme "nav"-->

ccs :

#nav{
margin:2.0833333333333333333333333333333% auto 50px;/*20/960*/
width:85%;
font-size:1.3em;
}
#menu, #menu ul{ /*ul principal du menu*/
list-style:none;
background-color:#c2c3e2;
}
#menu a{
display:block;
width:94%;
text-align:center;
padding:2%;
text-decoration:none;
background-color:#c2c3e2;
}
#menu li{
float:left;
width:33.333333333333333333333%; /*pour Opera*/
background-color:#c2c3e2;
}
#menu li ul{
position:absolute;
width:50%;
/*border:1px solid black;*/
left:-999%;/*Pour Opera qui prend "absolute" par rapport à la fenêtre et non au conteneur*/
}
#menu li:hover{
background-color:#80906b;
}
#menu li:hover a{
background-color:#80906b;
}
#menu li:hover ul, #menu li.sfhover ul{
left:auto;
background-color:#80906b;
}

Si quelqu'un peut me donner une piste,

Jean-Pierre
Modifié par Sebkra (24 Aug 2012 - 18:07)

Salut,

ton sous menu (#menu li ul) a une largeur : 50%;

Tes li ont une largeur de 33% et flottent à gauche, du coup ce comportement est logique.

Essaye de donner un style propre à tes li :

#menu li li {...}

Tout rentrera dans l'ordre.

Et entre nous, est-ce que IE6 mérite toujours qu'on y perde du temps ? Surtout au détriment de vrais navigateurs tesl que FF, Chrome...

Ju

Merci pour cette piste : j'ai essayé de mettre un peu d'ordre dans la css et c'est déjà beaucoup mieux. En fait, lorsque je remplaçais les % dans les width par des valeurs fixes en pixels, la présentation était nickel. Mais je tiens au responsive design ! J'ai trouvé un premier élément de solution en ajoutant une classe sur les premiers "li" de l'"ul" principal (.niv1). La mise en page est "presque" bien : le presque vient que je n'arrive pas à obtenir une largeur de sous-menu rigoureusement identique au titre du sous-menu, ce qui n'est pas terrible esthétiquement. Très empiriquement, j'ai indiqué une valeur de 28.3% pour "#menu li:hover ul" alors que "#menu li" a 33.333%. Bien évidemment un CTRL+molette met la pagaille... Y aurait-il une solution ?

PS : du coup, le menu est en vrac avec ie6. C'est plus pour le sport que j'essaie la compatibilité, mais c'est vrai, cela en vaut-il la peine ?
css :

#nav{
margin:2.0833333333333333333333333333333% auto 55px;/*20/960*/
width:85%;
font-size:1.3em;
}
#menu, #menu li{ /*ul principal du menu*/
list-style:none;
background-color:#c2c3e2;
}
#menu a{
text-decoration:none;
}
.niv1{/*premier "li" de "ul#menu"*/
float:left;
text-align:center;
width:33.333333333333333333333333%;
}
#menu li ul{
position:absolute;
left:-999%;
}
#menu li:hover ul, #menu li.sfhover ul{
left:auto;
width:28.3%;
}
#menu li:hover ul li{
/*width:100%;*/
/*padding:0 4%;*/
}
#menu li:hover{
background-color:#80906b;
}

En fait tu gère assez hasardeusement les position :s

Tes niveaux 2 (#menu li li) sont en absolute, mais tu ne fixe nulle part de "parent", du coup tes niveaux 2 font 28.033% d'on ne sait pas trop quel élément (probablement le body).

En tenant compte qu'un élément placé en absolute a pour référence le premier parent dont la position est définie, tu n'as qu'à donner une position relative à tes .niv1. Du coup, quand tu exprime une largeur en % tu sais à quoi t'en tenir.

Pour IE6, le problème doit se régler, je n'ai pas cette vieillerie sous le coude mais dans ce genre de menu, il faut souvent jouer avec les display block/inline pour lui plaire.

Ju

Bien sûr, c'est beaucoup mieux comme ça ! Comme tu l'as suggéré, ".niv1" en "position:relative;" et "#menu li:hover ul" avec "width:100%;". C'est nickel. Merci pour le coup de main.

Jean-Pierre

Pour ie6, je règlerai ça plus tard

Y'a pas de quoi