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

Création de menus déroulants à plusieurs niveaux avec du CSS pur

La réalisation de menus déroulants à plusieurs niveaux à l'aide de CSS pur a évolué depuis le les premières solutions que vous avez mentionnées. Voici une approche moderne qui offre une implémentation élégante et maintenable :

Cette méthode utilise une combinaison de listes non ordonnées imbriquées (

s) et de positionnement absolu pour créer la structure à plusieurs niveaux. Chaque niveau du menu est représenté par un
élément, et leurs positions sont contrôlées dynamiquement en fonction de leurs éléments parents.

L'extrait de code suivant fournit les styles CSS pour le menu :

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

.third-level-menu > li {
    height: 30px;
    background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }

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

.second-level-menu > li {
    position: relative;
    height: 30px;
    background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }

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

.top-level-menu > li {
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }

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

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

    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }

Copier après la connexion

La structure HTML du menu est la suivante :

<ul class="top-level-menu">
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li>
        <a href="#">Offices</a>
        <ul class="second-level-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li>
                <a href="#">New York</a>
                <ul class="third-level-menu">
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Book a Meeting</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Jobs</a></li>
                </ul>
            </li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

Copier après la connexion

Cette approche garantit que le menu reste réactif et s'adapte aux différentes tailles d'écran et orientations de l'appareil. Il élimine également le besoin de JavaScript, le rendant compatible avec tous les navigateurs.

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!