Menu déroulant en CSS

03 févr. 2006, 11:26

Bonjour tout le monde

J'ai un petit problème pour la création d'un menu déroulant en CSS

Mon menu est en réalité une imbrication de liste ordonnée dans lesquels les sousMenu ne sont pas affichés

Code : Tout sélectionner

<ul id="menuDeroulant">
	<li>
		<a href="#">Factures</a>
		<ul class="sousMenu">
			<li><a href="#">Factures reçues</a></li>
			<li><a href="#">Factures soumises</a></li>	
		</ul>
	</li>
	<li>
		<a href="#">Commandes</a>
		<ul class="sousMenu">			      
			<li><a href="#">Gestion commandes</a></li>
			<li><a href="#">Gestion paiements</a></li>
			<li><a href="#">TVA</a></li>
		</ul>
	</li>
</ul>

L'idée générale est que au survol d'une case du menu principal, le sous-menu associé apparaisse. Pour cela, j'ai utilisé l'opérateur > qui me permet de modifier une juste l'enfant de la case survolée
Pour cela, il faut que j'utilise l'enfant du li survolé :

Code : Tout sélectionner

#menuDeroulant li:hover > .sousMenu { display: block; }

Ce code fonctionne parfaitement sous FF, mais mon problème intervient (encore) lors de la vérification avec IE

En effet, IE n'attribue la pseudo classe :hover qu'aux liens donc mon style CSS n'est jamais appelé

Pour résoudre ce problème, il faudrait que le survol du lien affiche le sous menu concerné mais je ne sais pas comment récupérer l'enfant du li si le lien contenu dans le li est sélectionné

Code : Tout sélectionner

#menuDeroulant li a:hover > .sousMenu { display: block; }

ce style ne fonctionne pas parce que le sous menu n'est pas dans le lien

Est-ce que quelqu'un voit comment résoudre mon problème ou comment contourner mon problème ?

Lien vers menu li:hover > .sousMenu
Lien vers menu li a:hover > .sousMenu

09 févr. 2006, 02:48

Salut,
Il y a un tuto (que tu as du voir) pour faire le menu juste en CSS. Par contre sous IE ils disent qu'il faut mettre des images (pas top :s).
Je vois qu'une chose, c'est de mettre ton ul (sousMenu) dans ton lien. Par contre cette solution n'est pas terrible non plus.
Pourquoi ne pas utiliser du javascript sinon?
Est ce qu'une grande partie des personnes visées le désactivent?
En tout cas si tu trouves une autre solution je suis preneuse

++

11 févr. 2006, 08:27

Oui c'est le menu deroulant de alsa creation je crois j'ai eut le même problème, il faut mettre une image transparente comme ils te la donne avec le script.

Bonne chance !

Menu déroulant en CSS

Qui est en ligne