Maison > Article > interface Web > Savez-vous comment utiliser du CSS pur pour obtenir un effet de menu déroulant ?
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 :
<!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 :
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!