Ici, notez qu'on peut placer les styles généraux de mes sous-menus soit dans le sélecteur nav > ul li:hover, soit dans le sélecteur. Par défaut, on préfèrera placer les styles dans le sélecteur le plus simple et général. Le sélecteur nav > ul li:hover peut sembler complexe à première vue. Il sert à cibler un sous menu lorsqu'un utilisateur passe sa souris sur un éléments li de la liste représentant notre menu principal. Ensuite, on va vouloir que les éléments de nos sous-menus s'affichent cette fois-ci les uns en dessous des autres, occupent tout l'espace disponible dans leur conteneur et que le texte soit aligné à gauche. Menu déroulant horizontal css example. On va donc annuler le flottement hérité des onglets du menu principal. On va également déjà en profiter pour mettre en forme les onglets de nos sous-menus et s'appuyant une nouvelle fois sur les styles déjà créées. Ici, on va se contenter de supprimer la bordure basse héritée du menu principal, d'ajouter une marge interne et une couleur de fond lorsqu'on passe la souris sur un élément.
Dans mon cas, je vais faire simple pour ce premier essai et faire
un seul sous niveau. Menu déroulant – FrogWeb. On aura donc le premier niveau visible, et
un sous-niveau déroulant. Je vais commencer par le menu principal avec une liste non-ordonnée
qui commence par un élément
Menu 2
La seule difficulté ici est de s'assurer de bien fermer les différentes balises. Pour cela, il est conseillé d' indenter correctement son code pour une meilleure visibilité. Voici le résultat final: Vous avez peut-être remarqué les éléments de langage permettant d'ajouter des commentaires HTML entre chaque ligne de la liste de premier niveau! Ce n'est pas obligatoire, mais cette astuce nous permet de résoudre un problème d'espaces intempestifs que nous aurions eu par la suite avec la mise en forme en CSS. Vous pouvez d'ailleurs essayer de les enlever pour voir la différence… La structure HTML est terminée, nous pouvons passer à la mise en forme en CSS.
/* Gestion des couleurs */. dropdownmenu li {
background-color: #666; /* Couleur d'arriere-plan du menu */}. dropdownmenu li a {
color: #ccc; /* Couleur du texte du menu */}. dropdownmenu li:hover {
background-color: #000; /* Couleur d'arriere-plan du menu au survol */}. dropdownmenu li:hover a {
color: #fff; /* Couleur du texte du menu au survol */}. dropdownmenu ul li {
background-color: #ccc; /* Couleur d'arriere-plan des sous-menu */}. dropdownmenu ul li:hover {
background-color: #000; /* Couleur d'arriere-plan des sous-menu au survol */}. dropdownmenu ul li a {
color: #666; /* Couleur du texte des sous-menu */}. dropdownmenu ul li:hover a {
color: #f00; /* Couleur du texte des sous-menu au survol */} Notre menu est terminé! Code complet Voici les deux fichiers HTML et CSS complets et entièrement fonctionnels. Menu déroulant horizontal css page. Code HTML
Titre de la page