Comment transformer un menu déroulant CSS en menu déroulant ?

Sous-menu déroulant du menu déroulant vertical : implémenté avec du CSS pur

Pour le menu déroulant, transformé en drop -up les menus sont courants, surtout lorsque la barre de menus se trouve en bas de la mise en page. Pour y parvenir, nous devons apporter quelques modifications aux styles CSS.

Question : Convertir le menu déroulant en menu déroulant

Étant donné le CSS du menu déroulant, comment modifier le style pour qu'il devienne un menu déroulant ?

Solution : Ajuster la règle #menu:hover ul li:hover ul

Peut être effectué en ajoutant l'attribut bottom: 100% ; survolez les règles ul pour implémenter la fonction déroulante.

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

Amélioration facultative : appliquer le menu déroulant uniquement aux sous-menus de niveau supérieur

Pour empêcher les sous-menus d'appliquer également le menu déroulant Pour plus d'effet, vous pouvez ajouter les règles suivantes :

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

Autres considérations : Restaurer les bordures

L'ajout de l'attribut bottom : 100% peut supprimer la bordure du sous-menu. Pour restaurer la bordure, vous pouvez ajouter les attributs suivants :

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

Démonstration

Voici quelques exemples qui démontrent cette technique :

• [ Démo 1](https://jsfiddle.net/W5FWW/4/)
• [Démo 2](https://jsfiddle.net/zyp6c/)
• [Démo 3](https ://jsfiddle.net/phkj20zo/)

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!