Comment puis-je créer des menus déroulants à plusieurs niveaux en utilisant uniquement CSS ?

Création de menus déroulants multi-niveaux avec du CSS pur

Les menus déroulants multi-niveaux CSS uniquement offrent une interface claire et accessible moyen d’organiser des structures de navigation complexes sur un site Web. Bien que de nombreuses approches existent, la solution optimale varie en fonction de l'esthétique et de la fonctionnalité souhaitées.

Une technique efficace consiste à utiliser une structure de liste imbriquée et à positionner les sous-menus de manière absolue :

.third-level-menu
{
    -
    position: absolute;
    top: 0;
    right: 150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

Ceci Le code définit le sous-menu de troisième niveau, qui sera positionné à droite de son élément de menu parent.

.second-level-menu
{
    -
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

De même, ce code définit le sous-menu de deuxième niveau, qui sera positionné en dessous de son élément de menu parent.

.top-level-menu
{
    -
    list-style: none;
    padding: 0;
    margin: 0;
}

Ce code définit le menu de niveau supérieur, qui contiendra les éléments de menu parent.

Pour afficher les sous-menus lorsque leur élément de menu parent est survolé :

.top-level-menu li:hover > ul
{
    -
    /* On hover, display the next level's menu */
    display: inline;
}

De plus, le style peut être appliqué aux liens de menu et aux éléments de liste à des fins visuelles. personnalisation.

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!