Maison > Article > interface Web > Savez-vous comment utiliser du CSS pur pour obtenir un effet de menu déroulant ?

Savez-vous comment utiliser du CSS pur pour obtenir un effet de menu déroulant ?

王林avant: 2020-11-03 16:21:182480parcourir

Les étapes spécifiques de mise en œuvre sont les suivantes :

(Tutoriel vidéo recommandé : Tutoriel vidéo CSS)

1. ul et li Écrivez une structure d'association pour la balise (la relation parent-enfant entre ul et li est naturelle, et ils sont utilisés dans les structures d'association générales)

<ul class="nav">
    <a href="#">服装</a>
    <ul class="plat">
        <li><a href="#">衬衫</a></li>
        <li><a href="#">棉袄</a></li>
        <li><a href="#">裤衩</a></li>
    </ul>
</ul>

2 Initialisez l'interface

      *{
            padding: 0;
            margin: 0;
        }

3. Donnez les balises ul et a Ajoutez le style

 ul,a{
            font-size: 20px;
            list-style: none;
            text-decoration: none;
            background-color: #3C3C3C;
            color: #FFFFFF;
            width: 100px;
            text-align: center;
            border: 0px solid black;
            border-radius: 5px;  /*圆角*/
            margin-top: 1px;
        }
        a{
            display: block;
        }

4. Masquez le contenu de la partie .plat

.plat{
            display: none;
        }

5. Utilisez le sélecteur :hover pour la première balise a ; : lorsque la souris passe sur la balise a , une partie cachée du contenu est visible

.nav:hover .plat{
            display: block;
            clear: both;
        }

6. Maintenant que la fonction est implémentée, vous pouvez ajouter vos propres styles pour optimiser l'expérience utilisateur

Par exemple :

La barre de menu est disposée horizontalement :

.nav{
             float: left;
             margin-left: 1px;
         }

La souris glisse sur la colonne pour rappeler sa position

`.plat li:hover>a{
            background-color: dimgrey;
        }`

Résultat :

Savez-vous comment utiliser du CSS pur pour obtenir un effet de menu déroulant ?

L'ensemble du code est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul,a{
            font-size: 20px;
            list-style: none;
            text-decoration: none;
            background-color: #3C3C3C;
            color: #FFFFFF;
            width: 100px;
            text-align: center;
            border: 0px solid black;
            border-radius: 5px;
            margin-top: 1px;
        }
        a{
            display: block;
        }

        .plat{
            display: none;
        }
        .nav{
             float: left;
             margin-left: 1px;
         }
        .nav:hover .plat{
            display: block;
            clear: both;
        }
        .plat li:hover>a{
            background-color: dimgrey;
        }
    </style>
</head>
<body>
<ul>
    <a href="#">服装</a>
    <ul>
        <li><a href="#">衬衫</a></li>
        <li><a href="#">棉袄</a></li>
        <li><a href="#">裤衩</a></li>
    </ul>
</ul>
<ul>
    <a href="#">服装</a>
    <ul>
        <li><a href="#">衬衫</a></li>
        <li><a href="#">棉袄</a></li>
        <li><a href="#">裤衩</a></li>
    </ul>
</ul>
<ul>
    <a href="#">服装</a>
    <ul>
        <li><a href="#">衬衫</a></li>
        <li><a href="#">棉袄</a></li>
        <li><a href="#">裤衩</a></li>
    </ul>
</ul>
</body>
</html>

Recommandations associées :

Tutoriel CSS

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!

css 选择器 ul li

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Introduction à l'utilisation des pseudo-classes et pseudo-élémentsArticle suivant：Introduction à l'utilisation des pseudo-classes et pseudo-éléments

Articles Liés

Voir plus