Bonjour,

Je débute en CSS et je voudrait créer une menu

et un sous menu avec un espace entre le menu horizontale et le sous-menu horizontale également

mon souci c'est quand survol le lien du menu et que je veux passer au sous menu il disparait

pour que ca fonctionne il ne faut pas d'espace entre les menus

voici ce que je fais en 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
44
45
46
47
48
49
50
nav ul.primary-menu {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}
 
nav ul li {
    font-family: 'Roboto', sans-serif;
    border-bottom: none;
    height: 86px;
    line-height: 86px;
    font-size: 14px;
    display: inline-block;
    float:left;
    margin: 0 auto;
}
 
nav ul li a {
  text-decoration: none;
  color:#000000;
  display: block;
  transition: .3s background-color;
  padding:0 24px;
}
 
nav ul li a:hover {
  background-color: #5c89c7;
  color:#FFFFFF;
}
 
nav a {
  border-bottom:none;
}
 
nav li ul {
  position:absolute;
  display:none;
  width:inherit;
  background-color: yellow;
  margin-top: 3em;   // requis car je voudrait un espacement entre le menu et le sous menu
}
 
nav li:hover ul {
  display:block;
}
 
nav ul li ul li {
  display: block;
}
et ma structure HTML:

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Titre</title>
        <link href="style.css" rel="stylesheet" media="all" type="text/css"> 
    </head>
    <body>
    <nav>
    	<ul class="primary-menu">
    		<li><a>Men</a><div class="flyout__tab"></div>
    			<ul class="sub-menu">
		    		<li><a>T-shirt</a></li>
		    		<li><a>Sweat</a></li>
		    		<li><a>Bags</a></li>
    				<li><a>Shoes</a></li>    				
    			</ul>
    		</li>
    		<li><a>Women</a><div class="flyout__tab"></div></li> 
    		<li><a>Kids</a><div class="flyout__tab"></div></li> 
    		<li><a>Indoor</a><div class="flyout__tab"></div></li> 
    		<li><a>Car</a><div class="flyout__tab"></div></li> 
    		<li><a>House</a><div class="flyout__tab"></div></li> 
    		<li><a>Trucks</a><div class="flyout__tab"></div></li> 
    		<li><a>Computer</a><div class="flyout__tab"></div></li> 
    		<li><a>Tablet</a><div class="flyout__tab"></div></li> 
    		<li><a>Phone</a><div class="flyout__tab"></div></li> 
    	</ul>
    </nav>
    </body>
</html>

merci.