Menu déroulant CSS

grmber
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
Réponse acceptée

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

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.