Bonjour,
je découvre le HTML et le CSS : j'essaie de créer un menu deroulant et je n'arrive pas à faire apparaitre les sous menu lors du survol de la souris.
ci-dessous codes html et css crées avec Notepad+
Merci de votre aide.

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
	<head>
		<title>menu deroulant</title>
		<meta charset = "utf-8">
		<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
		<nav>
			<ul>
				<li class="menu-html"> <a href="html.html"> HTML</a></li>
					<ul class="sousmenu">
						<li><a href="#"> Cours complet HTML et CSS</a></li>
						<li><a href="#"> Référence des éléments HTML</a></li>
						<li><a href="#"> Référence des attributs HTML</a></li>
						<li><a href="#"> Exemples / Exercices</a></li>
					</ul>
				</li>
				<li class="menu-css"> <a href="css.html"> CSS</a></li>
					<ul class="sousmenu">
						<li><a href="#"> Cours complet HTML et CSS</a></li>
						<li><a href="#"> Référence des propriétés CSS</a></li>
						<li><a href="#"> Sélecteurs et pseudo-formats CSS</a></li>
						<li><a href="#"> Exemples / Exercices</a></li>
					</ul>
				</li>	
				<li class="menu-js"> <a href="javascript.html"> JavaScript</a></li>
					<ul class="sousmenu">
						<li><a href="#"> Cours complet JavaScript</a></li>
						<li><a href="#"> Référence des fonctions JavaScript</a></li>
						<li><a href="#"> Tout sur l'utilisation du DOM</a></li>
						<li><a href="#"> Exemples / Exercices</a></li>
					</ul>
				</li>
 
				<li class="menu-contact"> <a href="contact.html"> Contact</a></li>
			</ul>
 
		</nav>
 
	</body>
</html>
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
body{
	font-family : 'Source code pro', Calibri, serif;
	margin: 0px;
	padding : 0px;
}
/*On étire notre élément nav afin que notre navigation 
*prenne tout l'espace disponible*/
nav{
	width: 100%;
	background-color:green;
}
/*On utilise ">" pour ne cibler que la liste ul qui
*est un enfant direct de nav*/
nav > ul{
	margin: 0px;
	padding : 0px;
}
nav > ul::after{
	content: "";
	display: block;
	clear : both;
}
/*On affiche seulement les éléments li correspondant à
*nos onglets de menu en ligne (côte à côte*/
nav > ul > li{
	float: left;
	position: relative;
}
/*On enlève les puces devant tous les éléments li
*appartenant à notre éléments nav*/
nav li{
	list-style-type : none;
}
/*enlever le trait de soulignement et changer le display *
de tous les liens du menu(onglets et sous-onglets)*/
nav a{
	display: inline-block;
	text-decoration: none;
	color: red;
}
/*Taille des onglets. Ne s'applique qu'au lien des onglets*/
nav > ul > li > a{
	padding :15px 140px;
	color :yellow;
	border-right : 2px solid yellow;
}
/*On cache les sous onglets de notre menu*/
nav .sousmenu{
	padding : 50px 20px;
	display:none;
}
/*Affichage des sous onglets lors du survol 
*de la souris et positionnement des sous menus*/
nav li:hover .sousmenu{
 
	display:inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 0px;
	z-index: 1000;
}
 
.sousmenu li{
	float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 200px;
 border-top: 1px solid yellow;
 border-right: 1px solid blue;
}
.sousmenu li a{
	padding: 15px 30px;
	font-size : 13px;
	color:blue;
	width: 270px;
}
.menu-html:hover{
	border-top : 5px solid #e44d26;/*rouge brique*/
	background-color: RGBa(228,77,38, 0.15);/*violet*/
}
.menu-css:hover{
	border-top : 5px solid #0070bb;
	background-color: RGBa(000,112,192, 0.15);
}
.menu-js:hover{
	border-top : 5px solid #f1dc4f;/*jaune*/
	background-color: RGBa(241,220,79, 0.15);/*gris souris*/
}
.menu-contact:hover{
	border-top : 5px solid #bbb;
	background-color: RGBa(220,220,220, 0.15);
}
.sousmenu li:hover a{
	color:#EEE;/*gris clair*/
	font-weight: bold;
}
menu-html .sousmenu li:hover{
	background-color: RGB(210,77,60,);/*rouge brique*/
 
}
menu-css .sousmenu li:hover{
	background-color: RGB(000,115,200,);/*blue*/
}
menu-js .sousmenu li:hover{
	background-color: RGB(200,165,75,);/*caca d'oie*/
}