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.

[css]
nav {
text-align: left;
margin-left:0px;
width:1000px;
height:65px;
background: #9c1515;
font-family:’arial’;
font-size:14px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: «  »;
clear: both;
display: block;
}
nav ul li {
float: left;
line-height:15px;
height:40px;
}
nav ul li:hover {
background: #9c1515;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 0px 10px;
color: #fff;
text-decoration: none;
text-transform:uppercase;
font-size:12px;
margin-top:10px;
}
nav ul ul {
background: #5f6975;
padding: 0;
position: absolute;
z-index:999999999999999999999999999999999;
width:200px;
margin-top:10px;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 5px 10px;
color: #fff;
}
nav ul ul li a:hover {
}
nav ul ul ul {
position: absolute;
}
[/css]

 

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