Comment implémenter un menu déroulant avec du CSS pur

Cette fois, je vais vous montrer comment implémenter un menu déroulant en utilisant du CSS pur. Quelles sont les précautions pour implémenter un menu déroulant en utilisant du CSS pur. un cas pratique, jetons un coup d'oeil.

Cet article présente principalement l'exemple de code pour implémenter un menu déroulant en CSS pur et le partage avec tout le monde. Les détails sont les suivants :

Définissez la hauteur ul de la liste déroulante. menu à 0 et masquer la partie excédentaire.

Définissez la hauteur du menu déroulant et ajoutez un effet de transition L'effet de transition sera invalide lorsque la hauteur est automatique.

<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 :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le redessin et la réorganisation

Canvas pour créer une animation de Tai Chi en rotation

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!