Comment puis-je créer un menu déroulant à plusieurs niveaux en utilisant uniquement CSS ?-tutoriel CSS-php.cn

Comment puis-je créer un menu déroulant à plusieurs niveaux en utilisant uniquement CSS ?

Mary-Kate Olsen

Libérer： 2024-11-29 20:27:13

original

269 Les gens l'ont consulté

How Can I Create a Multi-Level Dropdown Menu Using Only CSS?

Menus déroulants multi-niveaux CSS pur : un guide complet

La création de menus déroulants multi-niveaux avec CSS peut être une technique puissante pour organiser structures de navigation complexes. Bien que des méthodes plus anciennes puissent encore exister, cet article présente une approche moderne et efficace pour obtenir cette fonctionnalité en utilisant du CSS pur.

La clé de la construction de menus multi-niveaux en CSS réside dans la manipulation de la position et des propriétés d'affichage du menu. articles. En utilisant le positionnement absolu des listes déroulantes et en contrôlant leur visibilité avec la propriété display, il est possible de créer des menus dynamiques et personnalisables.

Le code fourni ci-dessous illustre une structure de menu déroulant à trois niveaux. Le menu de niveau supérieur contient quatre catégories principales, chacune avec une liste déroulante potentielle. Les deuxième et troisième niveaux s'étendent verticalement à partir de leurs éléments parents respectifs, offrant une vue hiérarchique claire.

.third-level-menu {
    /* Position the third level menu absolutely within its parent */
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li {
    /* Define the appearance and height of third level menu items */
    height: 30px;
    background: #999999;
}

.third-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.second-level-menu {
    /* Position the second level menu absolutely within its parent */
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.second-level-menu > li {
    /* Position and define the appearance of second level menu items */
    position: relative;
    height: 30px;
    background: #999999;
}

.second-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.top-level-menu {
    /* Style the top level menu as a horizontal list */
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li {
    /* Position and define the appearance of top level menu items */
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}

.top-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.top-level-menu li:hover > ul {
    /* Display the next level menu on hover */
    display: inline;
}

/* Styles for the menu links */

.top-level-menu a {
    /* Styling for all links within the menu */
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;

    /* Stretch the link to cover the entire menu item */
    display: block;
    line-height: 30px;
}

.top-level-menu a:hover {
    /* Change link color on hover */
    color: #000000;
}

Copier après la connexion

Pour implémenter ce menu en HTML, utilisez le balisage suivant :

<ul>

Copier après la connexion

Par en combinant ces extraits CSS et HTML, vous pouvez créer un menu déroulant à plusieurs niveaux entièrement fonctionnel qui offre une expérience de navigation conviviale avec des visuels élégants.

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!