Pb menu déroulant...

Bonjour...

J'ai un menu déroulant sur un design de site que j'ai fait, mais j'ai un problème avec ce menu. Quand je ne spécifie pas de width à mon élément #nav li ul, mes liens de quand le lien du menu est survolé sont un à la suite de l'autre. Quand j'en spécifie un, il faut qu'il soit de même largeur que mon lien le plus long, sinon, l'affichage bogue (Chui sous FireFox 2 et IE 7).

Mon CSS du menu :

#nav ul {
	margin: 0;
	list-style: none;
	padding: 0px 0px 0px 10px;
	background: #EFEFEF;
	border: solid 1px #999999;
}

#nav {
	margin: 0;
	list-style: none;
	padding: 0px 0px 0px 30px;
}

#nav a {
	padding: 0px;
	margin-bottom: 0px;
}

#nav li {
	float: left;
	padding: 0px;
	margin-top: 3px;
	margin-right: 20px;
	margin-bottom: 3px;
}

#nav li ul {
	position: absolute;
	left: -999em;
		width: 120px;
}

#nav li:hover ul {
	left: auto;
}

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

Le lien vers ma page en question : Ici
Le menu a été pris sur : SuckerFish Dropdowns.

Merci d'avance pour votre précieuse aide!
Modifié par jeanism (18 Mar 2007 - 05:18)

Bonjour,

Est-ce voulu que les items des sous-menus soient flottants ? Si on veut qu'ils s'affichent les uns en dessous des autres, il faudra corriger ça :

#nav li ul li {float: none;}

En passant, j'aimerais souligner le fait que les menus déroulants posent de sérieux problèmes d'accessibilité. Dans la version actuelle, la navigation au clavier ne permet pas d'accéder aux sous-menus, par exemple.

Plus de précisions ici : L'accessibilité des menus de navigation en cascade.

Si le menu vertical à gauche est destiné à accueillir les mêmes liens que ceux des sous-menus, je serais d'avis de supprimer le menu déroulant pour garder un simple menu horizontal, aux intitulés bien choisis.

Bonjour,
Je viens de perdre des plombes à essayer d'adapter ce même menu. La réponse tient dans le min-width à la place de width dans les sous menus. Mais alors adieu la compatibilité avec IE6 à moins de trucs assez lassants.
Et puis tu te retrouves quand même avec du js.

J'ai fini par me tourner vers un menu déroulant tout CSS
http://www.cssplay.co.uk/menus/final_drop.html
Il faut quand même hacker pour IE6 mais je n'ai pas eu de problèmes de largeur de boites. Et là pas de js.

Si ce menu ne te convient pas tu en trouveras des dizaines d'autres sur ce même site. Bon courage !

Misange a écrit :
Je ne suis pas tout à fait d'accord avec ta remarque. Pourquoi proner une navigation qui marche au clavier mais pas pour ceux qui désactivent js ?

Ce n'est pas parce qu'on utilise Javascript que ça doit être inaccessible lorsque Javascript est désactivé...
Modifié par Florent V. (18 Mar 2007 - 11:52)