Comment implémenter le menu déroulant en CSS-tutoriel CSS-php.cn

Comment implémenter le menu déroulant en CSS

醉折花枝作酒筹

Libérer： 2023-01-05 16:10:31

original

13336 Les gens l'ont consulté

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.

Comment implémenter le menu déroulant en CSS

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

) pour créer le contenu du menu déroulant et placez-le où vous le souhaitez.

Utilisez l'élément

pour envelopper ces éléments et utilisez CSS pour styliser le contenu de la liste déroulante.

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>

Copier après la connexion

Effet :

Comment implémenter le menu déroulant en CSS