Comment puis-je créer un menu déroulant horizontal en utilisant uniquement CSS ?-tutoriel CSS-php.cn

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

Susan Sarandon

Libérer： 2024-12-06 15:22:15

original

136 Les gens l'ont consulté

How Can I Create a Horizontal Dropdown Menu Using Only CSS?

Création de menus déroulants horizontaux uniquement avec CSS

Les menus déroulants horizontaux offrent une expérience de navigation facile en permettant aux utilisateurs de survoler un élément principal élément de menu pour révéler les sous-menus. Atteindre cet effet uniquement avec CSS nécessite quelques prouesses en matière de style.

Structure HTML :

Commencez par créer une liste non ordonnée (<ul>) avec

éléments pour chaque élément de menu. Les sous-menus sont représentés par des symboles <ul> éléments.

Style CSS :

<ul>

Positionnement : Définissez l'élément <ul> à afficher sous forme de bloc et à ajouter un élément flottant à gauche à l'élément

éléments pour créer une disposition horizontale.

Visibilité des sous-menus : Dans un premier temps, masquez les sous-menus en définissant leur affichage sur aucun.

Styles d'éléments de menu :

<ul>

Définissez la couleur d'arrière-plan, le remplissage, la couleur du texte et la bordure du menu. éléments.

Effets de survol :

<ul>

Ajoutez des changements de couleur d'arrière-plan au survol pour les éléments de menu.

Afficher les sous-menus au survol en paramétrant leur affichage pour les bloquer et en les positionnant absolument.

Sous-menus réactifs :

<ul>

Réduisez la taille de la police des éléments de sous-menu en survol pour plus de facilité. lisibilité.

Ajouter des changements de couleur d'arrière-plan aux éléments de sous-menu sur survolez.

Exemple de code :

<ul>

Copier après la connexion

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

ul li {
  display: block;
  position: relative;
  float: left;
}

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;
}

Copier après la connexion

Démo en direct :
[Déroulante horizontale CSS pure Menu](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!