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 Pure CSS

Pure CSS permet la création de menus déroulants robustes et visuellement attrayants. Ce didacticiel vous guidera à travers les étapes permettant d'obtenir un menu déroulant "vers le haut", qui peut remplacer l'ouverture typique vers le bas.

Au départ, vous avez établi un menu déroulant CSS pur. menu qui répond à vos exigences à l'exception de son ouverture vers le bas. Notre objectif est de modifier votre code pour que le menu s'ouvre vers le haut, devenant ainsi un menu "drop-up".

Pour réaliser cette ouverture vers le haut, vous devez apporter une légère modification à vos règles CSS :

Solution 1 : Ajuster le positionnement

Dans la règle CSS qui positionne les sous-menus de votre menu déroulant, ajoutez la propriété bottom : 100%. Cela déplacera essentiellement les sous-menus au-dessus de leurs éléments de menu parent plutôt qu'en dessous d'eux.

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

Solution 2 : ciblez des sous-menus spécifiques

Si vous souhaitez empêcher l'effet d'ouverture vers le haut de s'appliquer à tous sous-menus, vous pouvez utiliser une règle CSS plus ciblée. Dans ce cas, modifiez la règle pour cibler uniquement les sous-menus des éléments de menu de niveau supérieur.

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

Solution 3 : Conserver la bordure du menu

Si l'ajustement du positionnement des sous-menus affecte leur aspect visuel, vous pouvez ajouter une propriété de bordure inférieure pour conserver l'apparence souhaitée.

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

En mettant en œuvre l'une de ces solutions, vous pouvez atteindre l'apparence souhaitée. menu "drop-up" souhaité en utilisant du CSS pur. Vous pouvez trouver une démonstration en direct sur http://jsfiddle.net/W5FWW/4/.

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!