Comment créer un menu déroulant en CSS3 sans Jquery

Dans cet article nous allons voir comment créer un simple menu déroulant en CSS 3 sans utiliser Jquery.

 

Comment créer un menu déroulant en CSS 3

 

Création du menu déroulant en CSS 3

Dans un premier temps pour créer notre menu déroulant, nous allons créer un dossier “CSS” à la racine de votre site et créer un simple fichier CSS que nous allons renommer en “menu.css” puis l’enregistrer dans ce dossier “CSS”.

Maintenant que notre fichier “menu.css” est prêt, nous allons y placer le code ci-dessous et l’enregistrer.

 

Création du menu déroulant en HTML

Maintenant que notre CSS est prêt, nous allons l’appeler sur notre page et créer le menu déroulant.

[sourcecode language=”html”]

<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Menu Déroulant en CSS 3 by JM Créa</title>
<link rel=”stylesheet” type=”text/css” href=”css/menu.css” />
</head>
<body>

<nav>
<ul>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a>
<ul>
<li><a href=”#”>Sous-menu 2</a></li>
<li><a href=”#”>Sous-menu 2</a></li>
<li><a href=”#”>Sous-menu 2</a>
</li>
</ul>
</li>
<li><a href=”#”>Menu 3</a>
<ul>
<li><a href=”#”>Sous-menu 3</a></li>
<li><a href=”#”>Sous-menu 3</a></li>
</ul>
</li>
<li><a href=”#”>Menu 4</a>
<ul>
<li><a href=”#”>Sous-menu 4</a></li>
<li><a href=”#”>Sous-menu 4</a></li>
</ul>
</li>
<li><a href=”#”>Menu 5</a>
<ul>
<li><a href=”#”>Sous-menu 5</a></li>
<li><a href=”#”>Sous-menu 5</a></li>
</ul>
</li>
</ul>
</nav>

</body>
</html>
[/sourcecode]

Vous pouvez ajuster ce menu comme bon vous semble. Si vous avez des questions, n’hésitez pas à en faire part.

Leave A Comment

Vous souhaitez créer un site web ou le référencer sur Google ?

Demandez votre devis gratuit