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

Création d'un menu déroulant CSS pur

Les menus déroulants horizontaux peuvent être facilement créés à l'aide de CSS pur, garantissant ainsi la compatibilité entre différents navigateurs. Voici comment y parvenir ceci :

HTML :

<ul>

CSS :

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

Démo :

http://jsfiddle.net/XPE3w/7/

Par en appliquant ces règles CSS à votre code HTML, vous pouvez créer un menu déroulant entièrement fonctionnel et compatible avec tous les navigateurs en utilisant du CSS pur.

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!