Menu verticale avec CSS3 avec survole de la souris

Version imprimable

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:

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:

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.

Salut,

En très résumé tu peux faire quelque chose comme ça:

Code:

1
2
3
4
5
6
7
8
 
<nav class="nav">
	<a href="#">Menu</a>
	<div class="menu-hover">
		<a class="content" href="#contact">Contact</a>
		<a class="content" href="#formulaire" >Formulaire</a>
	</div>
</nav>

Code:

1
2
3
4
 
.nav:hover .menu-hover{display:block;}
 
.menu-hover{display:none;}

Bonjour, et bienvenu sur DVP.

Un menu déroulant en CSS3
Un menu multi-niveaux, avec jQuery : https://codepen.io/jreaux62/pen/dPxKKQ

Pour info (@Ecared), un menu de navigation HTML5 aura généralement la structure :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<nav>
  <ul>
    <li>
      <a href="...">...</a>
        <ul>
          <li><a href="...">...</a></li>
          <li><a href="...">...</a></li>
          <li><a href="...">...</a></li>
        </ul>
    </li>
    <li>
      <a href="...">...</a>
        <ul>
          <li><a href="...">...</a></li>
          <li><a href="...">...</a></li>
        </ul>
    </li>
  </ul>
</nav>

Pour affichage/masquable sur :hover :

Code:

1
2
nav ul li ul {display:none;}
nav ul li:hover > ul {display:block;}

22/10/2016, 22h10
DevProg14

Bonjour,

Merci pour votre réponse à vous deux.
Les deux réponses permettent de résoudre mon problème.
J'ai une préférence pour la réponse de jreaux62, car elle permet de garder la structure du menu HTML5.
J'ai cependant une autre question toujours relative au menu, est ce que le hover est utilisable sur tablette et sur téléphone?
Car je pense qu'il y a un problème de portabilité et de plus le hover n'est pas utilisable avec le clavier en utilisant la tabulation.
Est-il préférable d'utiliser un bouton plutôt qu'un hover?

Cordialement.