Maison > Article > interface Web > Code CSS pur pour obtenir un effet de menu déroulant simple
Méthode de mise en œuvre :
(Tutoriel recommandé : Tutoriel CSS)
1. Écrivez une association en utilisant les balises ul et li. Structure (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 Initialiser l'interface (un début à un million de dollars)
*{ padding: 0; margin: 0; }
3. . Donnez ul et a Ajouter des styles aux balises (vous pouvez jouer librement ici)
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 Masquer le contenu de la partie .plat
.plat{ display: none; }
5 (Voici le point culminant) Utilisez : survolez la première balise a Sélecteur ; fonction d'implémentation : lorsque la souris passe sur la balise a, la partie cachée du contenu est visible
.nav:hover .plat{ display: block; clear: both; }
6. Jusqu'à présent, la fonction a été implémentée. propres styles pour optimiser l'expérience utilisateur
Par exemple :
Barre de menu 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; }`
Effet :
(Recommandation vidéo d'apprentissage : tutoriel vidéo CSS)
Tous les codes :
<!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>
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!