Maison > Article > interface Web > Comment implémenter le menu déroulant en CSS
Comment implémenter le menu déroulant en CSS
- 醉折花枝作酒筹original
- 2021-04-22 10:44:2813288parcourir
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!