Chargement...

Menus déroulants CSS

Les barres de navigation plaçaient les liens en rangée. Un menu déroulant ajoute un panneau imbriqué qui s’ouvre sous un déclencheur — souvent au survol, et mieux encore quand le focus clavier entre dedans. Maîtrisez un motif CSS calme avant d’inventer d’énormes méga-menus.

Une boîte à outils des menus déroulants

📊 Menus déroulants en un coup d’œil

Élément Rôle au quotidien
Déclencheur relative Le li parent (ou le wrapper) devient l’ancre de positionnement
Panneau absolute Le menu imbriqué se place sous le déclencheur (top: 100%)
Caché par défaut display: none ou hors écran jusqu’à l’ouverture
Révélation :hover Le pointeur ouvre le panneau
:focus-within Les utilisateurs clavier peuvent ouvrir/garder le panneau en tabulant
z-index Garde le panneau ouvert au-dessus du contenu suivant

Les menus déroulants en CSS seul sont un classique pédagogique. Les produits réels ajoutent souvent du JS pour basculer au clic tactile, fermer avec Escape et enrichir l’accessibilité — apprenez d’abord le squelette CSS ici.

Déclencheur relative, liste imbriquée

Gardez le lien déclencheur dans la barre du haut et imbriquez une seconde liste pour le sous-menu. L’élément parent doit être positionné pour que les enfants absolute connaissent leur maison.

Élément déroulant relative

css 
.nav > li {
position: relative;
}

.nav > li > a {
display: inline-block;
padding: 0.5rem 0.75rem;
}

Panneau absolute sous le déclencheur

Placez le sous-menu avec position: absolute, épinglez-le au bas du déclencheur et donnez-lui un fond opaque pour que le texte de la page ne transperce pas.

Panneau de sous-menu absolute

css 
.nav .submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 12rem;
margin: 0;
padding: 0.35rem 0;
list-style: none;
background: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

Cacher jusqu’à l’ouverture

Fermez le panneau par défaut. Tout ouvrir d’un coup annule l’intérêt du menu déroulant.

Cacher le sous-menu par défaut

css 
.nav .submenu {
display: none;
}

Révéler au survol

Quand le pointeur repose sur l’élément parent, montrez le panneau. Le padding du déclencheur aide à éviter les fermetures accidentelles au bord.

Le survol ouvre le sous-menu

css 
.nav > li:hover > .submenu {
display: block;
}

Préférez aussi focus-within

Le survol seul laisse les utilisateurs clavier de côté. :focus-within garde le panneau ouvert tant que le focus est dans l’élément — une amélioration CSS calme.

Focus-within ouvre le sous-menu

css 
.nav > li:hover > .submenu,
.nav > li:focus-within > .submenu {
display: block;
}

Une habitude de menu déroulant calme

Parent relative, panneau absolute, caché par défaut, hover + focus-within, z-index modeste. Laissez les méga-menus au clic et l’ARIA complexe pour des motifs plus riches plus tard — ne confondez pas avec la leçon des barres de navigation plates.

Empiler le menu ouvert

css 
.nav .submenu {
z-index: 20;
}

.nav .submenu a {
display: block;
padding: 0.45rem 0.9rem;
text-decoration: none;
color: inherit;
}

Essayez vous-même

  1. Rendez chaque li de premier niveau position: relative.
  2. Imbriquez une liste .submenu et positionnez-la absolute; top: 100%; left: 0.
  3. Cachez avec display: none, puis montrez sur li:hover.
  4. Ajoutez :focus-within pour que le focus clavier ouvre aussi le panneau.
  5. Augmentez le z-index et notez quand ajouter du JS pour basculer au clic tactile.

Erreurs fréquentes

  • Sous-menu absolute sans parent relative (le panneau s’envole)
  • Laisser le sous-menu visible par défaut
  • Retirer les styles de focus et perdre les utilisateurs clavier
  • Construire un méga-menu JS complet avant d’apprendre ce squelette CSS
  • Traiter les menus déroulants comme toute la leçon de mise en page

Résumé

  • Les menus déroulants imbriquent un panneau sous un déclencheur relative
  • Absolute + top: 100% épingle le menu sous le lien
  • Cachez par défaut ; révélez avec hover et focus-within
  • Utilisez z-index pour que le panneau couvre le contenu
  • Les barres plates venaient d’abord ; les menus imbriqués sont cette leçon

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
7
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 43 de 47
Css Tutoriel