Comment puis-je créer un menu déroulant CSS au lieu d'un menu déroulant ?

Menu déroulant avec du CSS pur

Cet article traite de la personnalisation d'un menu déroulant créé avec du CSS pur pour en faire un menu « déroulant » au lieu d'un menu « déroulant ». La barre de menu est située en bas de la mise en page, et la question est de savoir comment la faire s'ouvrir vers le haut.

Solution

Pour créer un menu déroulant, les règles CSS doivent être ajustées.

Démo 1 :

Ajouter le bas : 100 % ; à la règle CSS existante :

#menu:hover ul li:hover ul {
    bottom: 100%; /* added this attribute */
}

Démo 2 :

Pour éviter que les sous-menus ne soient affectés par le comportement de liste déroulante, utilisez cette règle :

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

Démo 3 :

Pour restaurer la frontière autour du menu déroulant :

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

Voici une démo de JSFiddle : 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!