Menu déroulant CSS

Par grmber, il y a 11 ans

Les bases HTML/CSS

Bonjour,

Après avoir essayé des tutos pour les menus déroulants, je n'y arrive toujours pas...

Pouvez-vous me donner uniquement le css afin d'afficher ou supprimer les menus déroulants afin que je comprenne bien à quoi sert quoi.

HTML

<div id="nav"> <ul> <li class="nav"><a href="">Accueil</a></li> <li><a href="">Genre</a></li> <ul> <li>Anim</li> <li>Com</li> <li>Mus</li> </ul> <li><a href="">Publicité</a></li> <li><a href="">Contact</a></li> </ul> </div>

CSS

#nav ul { text-align: center; width: 980px; margin: auto; } #nav li { display: inline-block; text-transform: uppercase; font-family: Arial, sans-serif; font-weight: 400; font-size: 15px; line-height: 18px; color: #000; height: 14px; padding: 20px; margin: 0 -2px; } #nav li.nav { height: 8px; border-bottom: 6px solid orange; } #nav li:hover { height: 8px; border-bottom: 6px solid orange; } #nav a { color: #000; text-decoration: none; }

Merci

2 réponses

Johny Mc Kane, il y a 11 ans

Bonsoir, je vous propose ma solution, il ne vous restera plus que à le centrer ou à le modifier à votre guise. Je vous donne le CSS + HTML

<div id="nav"> <ul> <li><a href="">Accueil</a></li> <li><a href="">Genre</a> <ul> <li><a href="">Anim</a></li> <li><a href="">Com</a></li> <li><a href="">Mus</a></li> </ul> </li> <li><a href="">Publicité</a></li> <li><a href="">Contact</a></li> </ul> </div>

et le CSS

#nav { height: auto; width: 100%; text-align: center; } #nav ul { margin:0; padding:0; list-style-type:none; list-style:none; } #nav li { float:left; margin:auto; padding:0; list-style:none; text-transform: uppercase; font-family: Arial, sans-serif; } #nav li a { display:block; width:100px; color: #000; text-decoration:none; padding:5px; } #nav li a:hover { height: 14px; border-bottom: 6px solid orange; } #nav ul li ul { display:none; } #nav ul li:hover ul { display:block; } #nav li:hover ul li { float:none; }

Bien à vous,

KaneIsDead

Mistah@Be, il y a 11 ans

Personnellement, les gars je préfère utiliser le JQuery car c'est plus simple et pourtant je maîtrise très bien le CSS mais il y a trop de code en CSS alors qu'en JQuery, il suffit d'utiliser la méthode slideDown(); ou slideUp(); voir même slideToggle(); mais bon c'est pour ceux qui sont à l'aise avec la POO et cela produit moins de code aussi.