Commençons par réduire la taille d’écriture du menu déroulant à 14px, puis rajouter une bordure noire sous les liens et établir la largeur des liens a 100%.
#top-menu .sub-menu li a {
font-size: 14px; border-bottom: 1px solid black; width: 100%;
}
On règle la largeur de la liste et enlève les marges internes par défaut.
#top-menu .sub-menu li {
padding-left: 0px; padding-right: 0px; width: 100%;
}
Idem pour les marges internes du sous-menu (conteneur).
#top-menu .sub-menu {
padding-top: 0px; padding-bottom: 0px;
}
Et on finit avec les sous sous-menus.
#top-menu li li a {
padding-top: 10px; padding-bottom: 8px;
}
On peut aussi rajouter un effet lorsqu’on survole un lien du menu déroulant avec la souris (hover)
Faisons un rouge bien voyant pour que la différence soit nette.
.nav ul li a:hover {
opacity: 1; background-color: red;
}
Bonjour. Merci pour ce tuto. J’ai essayé d’insérer les différents codes CSS dans le CSS additionnel, mais je ne vois aucun changement dans l’affichage du menu déroulant. Pourrais-je vous envoyer une capture d’écran ? Merci d’avance. Bien à vous.