communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > Comment créer un menu déroulant dans la barre de navigation html ? Voici des exemples de code détaillés

Comment créer un menu déroulant dans la barre de navigation html ? Voici des exemples de code détaillés

寻∝梦
Libérer： 2018-09-04 14:26:11
original
29132 Les gens l'ont consulté

Cet article présente la production du menu déroulant de la barre de navigation HTML. Le code de tous les menus déroulants des barres de navigation est donné au début de l'article. Si vous ne comprenez pas, il y a une explication détaillée ci-dessous. Jetons un coup d'œil ensemble à cet article

Ce dont nous allons parler, c'est de la production du menu déroulant de la barre de navigation HTML. Regardons d'abord un exemple de code complet : 

<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;
    z-index: 1;
}
.dropdown:hover .dropdown-content {
    display: block;
}
</style>
<div class="dropdown">
  <span>php中文网</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>
</div>
Copier après la connexion
Tout le monde peut-il comprendre ce code ?

Ce n’est pas grave si vous ne comprenez pas. Il y a une explication. Vous comprendrez après l’explication.

Exemple d'analyse du menu de la barre de navigation html :

Partie HTML du menu de la barre de navigation html :

Nous pouvons utiliser n'importe quel Élément HTML pour ouvrir un menu déroulant, tel que ou un élément

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!

Étiquettes associées：
html 下拉菜单
source：php.cn
Article précédent：Comment définir le défilement de l'image dans la balise de sélection HTML ? Exemple de code de défilement d'image pour la balise de sélection Article suivant：Comment changer la couleur d'un bouton en html ? Introduction à l'utilisation des balises de boutons HTML
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
En vue mobile, comment fermer cette barre de navigation lorsque l'utilisateur clique sur le lien ? Lorsque l'utilisateur clique sur un lien pour naviguer sur le site Internet, la barre de n...
Depuis 2024-04-06 19:23:03
0
1
411
Afficher les panneaux latéraux masqués : coché J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de pass...
Depuis 2024-04-06 15:49:33
0
1
319
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
PHPMailer utilisant Gmail et XOAUTH2 : Comment obtenir automatiquement un nouveau jeton d'actualisation lorsque le jeton d'actualisation actuel expire ? Je suis préoccupé par l'utilisation de Gmail avec XOAUTH2 (PHPMailerWiki) et par Comment e...
Depuis 2024-04-06 10:14:45
0
1
373
La fonction JavaScript n'a aucun effet sur le clic sur le bouton J'ai cherché sur Internet et essayé beaucoup de choses, mais je suis bloqué sur un problèm...
Depuis 2024-04-05 13:14:53
0
2
1433
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal