Maison > Article > interface Web > Comment implémenter le menu déroulant en CSS
Méthode : utilisez d'abord un élément div pour créer le contenu du menu déroulant, et définissez le style "display:none" pour le masquer, puis créez un élément HTML qui ouvre le menu déroulant ; enfin, utilisez le sélecteur ":hover" pour définir le style " display:block", utilisé pour afficher le menu déroulant lorsque la souris passe sur le bouton déroulant.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Partie HTML :
Nous pouvons utiliser n'importe quel élément HTML pour ouvrir le menu déroulant, tel que : , ou un élément
Utilisez des éléments conteneurs (tels que
Utilisez l'élément
Partie CSS : La classe
.dropdown utilise position:relative, qui définira le contenu du menu déroulant à placer dans le coin inférieur droit du bouton déroulant ( en utilisant position:absolu). La classe
.dropdown-content est le véritable menu déroulant. Il est masqué par défaut et sera affiché une fois que la souris se déplacera vers l'élément spécifié. Notez que la valeur min-width est définie sur 160px. Vous pouvez le modifier à votre guise. Remarque : Si vous souhaitez que le contenu de la liste déroulante ait la même largeur que le bouton déroulant, définissez la largeur sur 100 % (le paramètre overflow:auto peut défiler sur les petits écrans).
Nous utilisons l'attribut box-shadow pour faire ressembler le menu déroulant à une "carte".
: le sélecteur de survol permet d'afficher le menu déroulant lorsque l'utilisateur déplace la souris sur le bouton déroulant.
Code :
<!DOCTYPE html> <html> <head> <title>document</title> <meta charset="utf-8"> <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <div class="dropdown"> <span>鼠标移动到这里,会出现下拉列表</span> <div class="dropdown-content"> <p>表单一</p> <p>表单一</p> </div> </div> </body> </html>
Effet :
Apprentissage recommandé : Tutoriel vidéo 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!