Bonjour,

Je suis entrain de faire un menu verticale en CSS3 en utilisant HTLM5.
Je voudrais lors sur du survole de la souris sur le Menu , que la liste des items du menu soit affichée, et puis lorsque la souris n'est plus sur le Menu, il y a disparition de la liste des items. Tout en gardant à l'idée l'utilisation du clavier.
J'ai essayé d'utilisé display avec la valeur none et la valeur block mais impossible à faire fonctionner.

Je voudrais savoir si vous pouvez m'éclairer sur ce point afin que je puisse savoir d'où peut venir mon erreur?

Je vous met le code htlm:
Code : 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
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
        <title>Objectif Formation</title>
    </head>
 
    <body>
		<!-- Header -->
		<header id="header">
			<h1><a href="#">Objectif formation</a></h1>
 
			<nav class="nav">
				<ul>
					<li><a class="active" href="#menu">Menu</a></li>
					<li><a class="content" href="#contact" >Contact</a></li>
					<li><a class="content" href="#formulaire" >Formulaire</a></li>
				</ul>
			</nav>
		</header>
 
    </body>
</html>
Je vous met aussi le code css:
Code : 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
 
/*navigation principal*/
#header .nav ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
 
}
 
/*ligne de séparation dans la liste du menu*/
#header .nav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    border-bottom: solid 1px rgba(160, 160, 160, 0.3);
}
 
/*element de la liste du menu: disparition : dois etre utilisable avec clavier */
/*#header .nav li a.content {
    display:none;
}*/
 
/* survole de la souris sur la liste: décalage, effet de mouvement*/
#header .nav li a:hover:not(.active) {
    background-color: #555;
    color: white;
    padding-left: 30px; /* décalage du contenu vers la droite */
 
}
 
/*couleur de l'item Menu*/
#header .nav li a.active {
    background-color: #4CAF50;
    color: white;
}
 
/*survole de la souris sur l'item Menu*/
#header .nav li a.active:hover {
    background-color: #0080ff;
}
Merci de votre compréhension.
Cordialement.