Comment puis-je créer un menu déroulant s'ouvrant vers le haut en utilisant uniquement CSS ?

Menu déroulant qui s'ouvre vers le haut avec du CSS pur

Le défi de convertir un menu déroulant en un menu « déroulant » s'ouvrant vers le haut en utilisant uniquement CSS nécessite une légère modification de son style. Le CSS proposé ci-dessous permettra d'obtenir cet effet :

#menu:hover ul li:hover ul {
  position: absolute;
  margin-top: 1px;
  font: 10px;
  bottom: 100%;
}

Explication

En ajoutant bottom : 100%; Selon la règle ci-dessus, les sous-menus seront positionnés au bas de leurs éléments de menu parents et apparaîtront « se déroulant » lorsqu'ils sont survolés.

Affinements supplémentaires

Pour un effet plus raffiné, vous peut supprimer le chevauchement entre les sous-menus en ajoutant :

#menu>ul>li:hover>ul {
  bottom: 100%;
}

Cela garantit que seul le sous-menu de l'élément de menu survolé s'ouvrira vers le haut.

Démo

Pour expérimenter l'effet drop-up, vous pouvez vous référer à la démo suivante : http://jsfiddle.net/W5FWW/4/.

Conserver la bordure

Si le menu d'origine avait une bordure, vous pouvez la restaurer en ajout :

#menu>ul>li:hover>ul {
  bottom: 100%;
  border-bottom: 1px solid transparent
}

Cela conservera la bordure tout en préservant la fonctionnalité de liste déroulante.

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!