[HTML/CSS]Un menu déroulant ? Trop facile !

Salut tout le monde !

Parfois il est utile de faire un menu déroulant. Et maintenant, vous allez pouvoir le faire seul et facilement !

---

C'est parti pour apprendre comment faire !

C'est à faire sur une page HTML dont la structure est par ici

Code:

<ul id="menu">
    <li><a href="#">Mon menu 1</a></li>
    <li><a href="#">Mon menu 2</a></li>
    <li><a href="#">Mon menu 3</a></li>
</ul>

Puis dans chaque menu on va aussi mettre une liste pour faire les sous-menus.

Code:

<ul id="menu">
    <li><a href="#">Mon menu 1</a>
        <ul>
            <li><a href="#">Mon sous menu 1</a></li>
            <li><a href="#">Mon sous menu 2</a></li>
        </ul>
    </li>
    <li><a href="#">Mon menu 2</a>
        <ul>
            <li><a href="#">Mon sous menu 1</a></li>
            <li><a href="#">Mon sous menu 2</a></li>
        </ul>
    </li>
    <li><a href="#">Mon menu 3</a>
        <ul>
            <li><a href="#">Mon sous menu 1</a></li>
            <li><a href="#">Mon sous menu 2</a></li>
        </ul>
    </li>
</ul>

Pour le moment, le rendu est pas terrible : pas du tout ce qu'on veut !!

Spoiler:

On va commencer par retirer les puces de nos deux listes. Comme ceci :

Code:

ul#menu, ul#menu ul{
list-style-type:none;
}

On applique le style à la balise ul qui a pour id menu (ul#menu) ainsi qu'à la balise ul qui se trouve à l'intérieur de la précédente (ul#menu ul)

Puis on va retirer tous les remplissages (padding) en les mettant à 0 pour qu'il n'y ait plus les décalages.

Code:

ul#menu, ul#menu ul{
list-style-type:none;
padding:0;
}

Maintenant on va cacher les sous menus : on veut qu'ils n'apparaissent qu'au passage de la souris.

Code:

ul#menu ul{
display:none;
}

Et on dit à notre css : quand on passe sur une des puces, la sous liste concernée doit se montrer.

Code:

ul#menu li:hover > ul{
display:block;
}

On applique le style à la balise ul qui est enfant direct (>) de la balise li qui est dans ul#menu. Mais on ne l'applique que quand on survole la balise li (li:hover), donc un des points de la liste.

Si tu fais un aperçu, tu te rends compte que du coup ça décale tout vers le bas. Pas de souci ! On va faire s'afficher la sous liste à coté plutôt. Pour cela, on commence par changer les positionnements : d'abord on dit que notre sous liste doit se placer par rapport à notre liste.

Code:

ul#menu li{
position:relative;
}
ul#menu li:hover > ul{
position:absolute;
}

Bon, là ça se grimpe un peu dessus, mais au moins ça ne décale plus. Pour que ça fasse joli, on va appliquer une largeur à notre première liste, et placer notre sous liste après cette largeur. Comme ceci (j'ai mis une couleur de fond, une couleur au passage de la souris et j'ai mis en page comme je voulais en CSS ^^) :

Code:

ul#menu, ul#menu ul{
list-style-type:none;
padding:0;
/*mise en page des listes*/
width:150px;
background:grey;
color:white;
text-align:center;
}
ul#menu a, ul#menu ul a{
color:white;
}
ul#menu ul{
display:none;
}
ul#menu li{
position:relative;
}
ul#menu li:hover{
background:black;
}
ul#menu li:hover > ul{
display:block;
position:absolute;
left:150px; /* on place notre sous liste */
top:0; /*on place notre sous liste*/
}

Et voilà le rendu :


Pour cela on va changer légèrement la CSS. On va rajouter que nos "li" de la liste principale doivent être en "display:inline-block"

Code:

ul#menu li{
    position:relative;
 /*mise en page des listes*/
    width:150px;
    background:grey;
    color:white;
    text-align:center;
display:inline-block;
    }

Et on va retirer notre positionnement des sous listes :

Code:

ul#menu li:hover > ul{
    display:block;
    position:absolute;
    }

Et le résultat :

---

Tu n'as plus qu'à mettre en page tes liens, etc. Si tu as des questions sur tout ça, n'hésites pas à demander !