Maison >interface Web >tutoriel CSS >Comment créer un menu déroulant Bootstrap qui s'ouvre au survol ?

Comment créer un menu déroulant Bootstrap qui s'ouvre au survol ?

DDD
DDDoriginal
2024-11-19 05:25:03455parcourir

How to Create a Bootstrap Dropdown Menu that Opens on Hover?

Menu déroulant déroulant Bootstrap

Lors de la création d'un menu déroulant Bootstrap, le comportement par défaut est qu'il s'ouvre lorsque vous cliquez sur le bouton bascule . Cependant, il peut y avoir des situations où vous préféreriez qu'il s'ouvre au survol.

Pour y parvenir, vous pouvez utiliser CSS :

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
}

Ce code CSS cible le menu déroulant et définit sa propriété d'affichage sur bloquer lorsque l'élément déroulant parent est survolé. De plus, il supprime toute marge par défaut en haut du menu déroulant pour éliminer l'espace qui peut parfois apparaître lorsque la liste déroulante est ouverte.

Cette solution est simple et ne nécessite aucune modification de la structure HTML ou JavaScript. code. Il fournit un moyen simple de créer un menu déroulant qui s'ouvre au survol, améliorant ainsi l'expérience utilisateur et permettant une navigation plus intuitive.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn