Problème de sélecteur pour sous-menu

Bonjour,

Je voudrais afficher des sous-menu en fonction du menu que je sélectionne. Ainsi, par défaut, le sous-menu est caché, puis si je passe la souris sur le menu, il faudrait que le sous-menu s'affiche. Mais je n'arrive pas à trouver le bon sélecteur CSS (L72 (CSS))

Mon code actuel : https://codepen.io/Titouan79/pen/BayjgWd

Merci d'avance pour vos réponses
Modifié par Titouan79 (10 Dec 2019 - 09:30)

Mais si je souhaite le réaliser comme j'ai commencé ? Comment puis-je faire ?

Bonjour Titouan,

J'ai modifié légèrement ton code pour avoir le résultat attendu sans trop casser la structure de base, code dispo ici : https://codepen.io/Friesstyle/pen/wvBMVxb

La principale modif est des mettre le sous-menu dans l'item de menu lui-même et non dans une div à part à l'extérieur du block .menus. Ensuite lors du survol de ton élément, rendre visible le block .submenu (qui est en display: none à la base) à l'intérieur du .menu (cf: .menu:hover > a + .submenu). Cependant, je ne suis pas très fan de la structure et par conséquent du sélecteur CSS mis en place. Il vaudrait mieux utiliser une vraie liste imbriquée pour que la sémantique soit plus juste et ajouter la balise nav au passage. Tu as l'astuce pour faire apparaître le à toi d'adapter le CSS en fonction de la nouvelle structure html, bon courage .
Modifié par Friesstyle (10 Dec 2019 - 11:11)

Merci beaucoup, mais il faudrait que le sous-menu prenne la largeur complète de la page. Or, pour le moment, il ne prend que la largeur du menu parent.
Merci
Modifié par Titouan79 (10 Dec 2019 - 11:19)

Si tu veux que le sous-menu prenne toute la largeur de la page il faut positionner un parent qui a cette largeur. Par exemple, enlever la position: relative; du .menu et le mettre sur .menus. Ensuite adapter l'alignement du texte.