Créer un menu déroulant sans Javascript

Aperçu

Difficulté ♦♦♦♦♦

I/ Créons un menu simple

Commencez par écrire à la suite tous les menus que vous voulez. Pour moi, ce sera Menu 1, Menu 2 et Menu 3. Je vous conseille d'entourer l'ensemble de vos menus d'une division et attribuez-y une class si vous voulez modifier l'ensemble !

Ensuite, entourez chacun de vos menus par une balise span avec une class. Ceci est essentiel car quand on passe le curseur sur ce span, le menu déroulant apparaîtra. (Les sauts de ligne ne sont pas importants, je le fais pour plus de lisibilité.)

II/ Créons un premier menu déroulant

Occupons-nous du menu déroulant de Menu 1. Je vais donc faire Menu 1.1 et Menu 1.2. Pour cela, il faut créer une div dans le span qui a pour class menu_seul. De même, il faut lui attribuer une class !

III/ Passons au CSS !

Si vous regardez ce que ça donne et bien franchement, vous devez être déçus ! En effet, ça ne doit ressembler à rien ! Il faut ajouter le CSS ! Il faut faire en sorte sur le span avec la class dans_menu_seul ne s'affiche que lorsqu'on passe le curseur sur le span avec la class menu_seul. Pour cela, il faut utiliser display.

.menu_seul .dans_menu_seul
{
display: none;
}
.menu_seul:hover .dans_menu_seul
{
display: block;
position: absolute;
}
.menu_seul:hover
{
cursor: pointer;
}

Normalement, cela suffit pour que votre menu s'affiche. Faites de même pour le deuxième menu ! Vous pouvez cependant jouer sur les propriétés de css comme la longueur, la hauteur, la couleur de fond... Bref, amusez-vous !

Et retenez bien qu'en HTML, le plus important, c'est de s'entrainer et de faire mille et un tests !

Bon courage !