Comment puis-je créer un menu déroulant en utilisant uniquement CSS ?

Création de menus déroulants purement basés sur CSS

Dans le développement Web, les menus déroulants sont un élément d'interface utilisateur courant utilisé pour organiser et présenter les choix de manière logique. Si vous désirez un menu déroulant sans recourir à des frameworks externes ou à JavaScript, le CSS pur peut fournir une solution appropriée.

Implémentation du menu déroulant CSS pur

Pour construire un menu déroulant purement CSS -menu déroulant basé sur, suivez ces étapes :

1. Structure HTML : Définir une liste non ordonnée (<ul>), chaque élément de liste (
2. ) représentant un élément de menu. À l'intérieur des éléments de la liste, imbriquez d'autres listes non ordonnées pour les sous-menus.
3. Style : Utilisez CSS pour styliser le menu. Définissez l'ul pour qu'il n'y ait pas de puces, pas de marges et un alignement horizontal. Positionnez les éléments li en ligne pour un alignement horizontal.
4. Visibilité du menu déroulant : Pour basculer la visibilité des sous-menus, utilisez la pseudo-classe :hover sur les éléments de la liste. Lorsqu'un élément de liste est survolé, son sous-menu (ul) devient visible.
5. Apparence du menu : Personnalisez l'apparence des éléments de menu, des sous-menus et des liens à l'aide de propriétés CSS telles que background-color, couleur et rembourrage.

Exemple de code

Le L'extrait de code suivant fournit un exemple de menu déroulant purement basé sur CSS :

HTML :

<ul>

CSS :

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  display: inline-block;
  position: relative;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}

ul li a:hover {
  background: #617F8A;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
}

li:hover a {
  background: #617F8A;
}

li:hover li a:hover {
  background: #95A9B1;
}

Démo en direct : [jsfiddle.net/XPE3w/7/](http://jsfiddle.net/XPE3w/7/)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!