Tutoriel sur la façon d'implémenter un menu déroulant en utilisant du CSS pur

Cet article présente principalement l'exemple de code pour implémenter un menu déroulant en CSS pur. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Réglez la hauteur ul du menu déroulant sur 0 et masquez la partie excédentaire.

Définissez la hauteur du menu déroulant pour ajouter un effet de transition. Lorsque la hauteur est automatique, l'effet de transition sera invalide.

<style>
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul li a{
        display: block;
        text-decoration: none;
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: white;
        background-color: #2f3e45;
    }
    .drop-down{
        width: 100px;
        height: 50px;
    }
    .drop-down-content{
        opacity: 0;
        height: 0;
        overflow: hidden;
        transition: all 1s ease;
    }

    p{
        font-size: 20px;
        margin: 0;
    }
    .drop-down-content li:hover a{
        background-color: red;
    }
    .nav .drop-down:hover .drop-down-content{
        opacity: 1;
        height: 150px;
    }
</style>
<ul class="nav">
    <li class="drop-down">
        <a href="#">下拉菜单</a>
        <ul class="drop-down-content">
            <li><a href="#">菜单1</a></li>
            <li><a href="#">菜单2</a></li>
            <li><a href="#">菜单3</a></li>
        </ul>
    </li>
</ul>
<p>内容</p>

Le rendu est le suivant :

Recommandations associées :

Implémentation JQuery du partage de méthodes de menu déroulant

Comment utiliser les instructions personnalisées de Vue pour compléter un menu déroulant

Étapes pour implémenter l'effet de menu déroulant animé à l'aide de CSS3

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!