Comment mettre en œuvre un menu déroulant CSS à plusieurs niveaux avec différentes classes ?

Question

J'essaie de mettre en œuvre un menu de navigation déroulant à plusieurs niveaux en CSS uniquement, mais il y a une petite partie que je n'arrive pas à faire fonctionner correctement.

Ce qui devrait se passer :

1) Lorsque l'on passe la souris sur un élément de menu, celui-ci devrait être mis en évidence en utilisant une image différente (cela fonctionne bien). 2) Lorsque vous survolez un élément de sous-menu, l'élément de menu parent doit être mis en évidence.

Le point 2 fonctionne bien jusqu'à ce que j'aie une classe .bottom sur l'élément de menu parent (cette classe est utilisée car l'image est légèrement différente). Si l'élément de menu parent a la classe .bottom, la mise en évidence ne se produit tout simplement pas.

Une démonstration de ce système peut être consultée ici : http://jsfiddle.net/cZFtW/2/

La démo montre qu'en survolant Menu 1 > Sous-menu 3 > Sous-menu X, le Sous-menu 3 est mis en évidence. Cependant, lorsqu'on passe la souris sur le menu 2 > Sous-menu 3 > Sous-menu X, il n'y a pas de surbrillance.

Quelqu'un peut-il voir ce que je manque ? D'ailleurs, il n'y a pas de raison de ne pas utiliser Javascript ici, je préfère simplement que tout soit géré par CSS si possible (il suffit de supporter IE7+).

Answer 1

TL;DR ; version : ce violon montre la réponse.

---

Je comprends ce que vous voulez dire. Et je suis à peu près sûr que le style auquel vous avez besoin d'une réponse, qui fonctionne pour tous sauf pour celui du bas, est apparu par pur hasard. (Un beau hasard, je dois dire). Je suis presque certain de cela, car votre code ainsi que les noms de fichiers manquent de toute forme de cohérence. Il y a du code double, du code superflu, et il manque des images.

Par conséquent, j'ai réécrit vos balises et votre feuille de style, et j'en suis venu au violon comme mentionné ci-dessus.

Maintenant, comment ça marche ?

L'astuce consiste à attacher l'image de fond à un élément de la liste. Dans ce cas, j'ai choisi un élément d'ancrage, car c'est le plus probable. La première étape consiste à changer l'image de fond au survol de l'ancre, c'est basique.

La deuxième étape consiste à modifier à nouveau l'arrière-plan lorsque vous survolez le sous-menu. À ce moment-là, l'élément d'ancrage n'est plus survolé, mais l'élément de liste l'est. Vous pouvez donc toujours modifier l'arrière-plan de l'élément d'ancrage.

Note : dans ma solution, il y a une petite différence par rapport à ce que vous souhaitez : lorsque vous survolez la flèche, l'arrière-plan de l'élément de la liste est déjà modifié au lieu de l'être jusqu'à ce que le curseur soit sur le sous-menu. Si vous voulez empêcher cela, vous devez ajouter un élément supplémentaire pour chaque sous-menu comme vous l'avez fait vous-même. Mais je pense que c'est également très bien.