Comment puis-je ouvrir un menu déroulant CSS pur vers le haut plutôt que vers le bas ?

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

Les menus déroulants Pure CSS sont un excellent moyen de naviguer intuitivement sur les sites Web. Cependant, dans certaines conceptions, vous souhaiterez peut-être que le menu s'ouvre vers le haut plutôt que vers le bas. Voici comment y parvenir uniquement via CSS :

Le problème :
Vous avez un menu déroulant avec CSS qui s'ouvre vers le bas, mais vous souhaitez le modifier pour qu'il s'ouvre vers le haut. , en préservant sa position et ses fonctionnalités.

La solution :
Pour ouvrir le menu déroulant vers le haut, vous devez modifier le CSS règle qui positionne les sous-menus. Voici comment :

Option 1 : Ajustez la marge supérieure

#menu:hover ul li:hover ul {
  ...
  margin-top: -22px;
}

Changez-la en :

#menu:hover ul li:hover ul {
  ...
  margin-top: 1px;
  bottom: 100%;
}

En ajoutant le bas : 100 %;, vous forcerez le sous-menu à apparaître au-dessus de l'élément de menu parent.

Option 2 : Cible spécifique Sous-menus

Si vous ne souhaitez pas que tous les sous-menus s'ouvrent vers le haut, vous pouvez en cibler des spécifiques en utilisant cette règle :

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

Option 3 : Démo alternative

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

Cette approche alternative conserve la bordure du sous-menu.

En implémentant ces modifications CSS, vous pouvez facilement convertir votre pure page orientée vers le bas. Menu déroulant CSS en un menu orienté vers le haut. N'oubliez pas d'ajuster les valeurs de marge si nécessaire en fonction de votre conception.

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!