Espace netre menu et sous menu

Version imprimable

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:

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:

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.

Rebonjour Sinzen,
Je vois que tu n'as pas résolu ton problème d'empreinte que je n'ai toujours pas vu ou compris.
Pour ton problème de sous-menus, je m'y suis collé en modifiant quelques dimensions faciles à changer.
Est-ce que c'est cela que tu veux obtenir? j'ai rajouter des sous-sous-menus et une couleur de fond pour le menu principal afin de voir les séparations.
https://codepen.io/JefReb/pen/dRrzJE

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
44
45
46
47
48
49
50
51
52
53
nav {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}
nav ul {
	line-height: 86px;
	list-style: none;
	text-align: center;
	padding: 0;
	margin: 0;
}
nav a {
	display: block;
	width: 150px;
	text-decoration: none;
	color: #000000;
	background-color: yellow;
	/*transition: .3s background-color;*/
	padding: 0;
}
Nav > ul > li > a {
	background-color: rgba(92,137,199,0.2); /* un peu de couleur sur la première ligne pour voir les séparations */
}
nav li {
	float: left;
	border-right: 1px solid transparent;
}
nav li ul li {
	float: none;
}
nav li ul {
	position: absolute;
	display: none;
	line-height: 28px;
}
nav li ul li {
	border-top : 1px solid transparent;
}
nav li ul ul {								/* les sous-sous-listes */
	margin : -28px 0 0 150px;
	border-left : 1px solid transparent;
}
nav li:hover ul ul {
	display: none;
}
nav li a:hover {
	background-color: #5c89c7;
	color: #FFFFFF;
	text-decoration: underline;
}
nav li:hover ul, nav li li:hover ul {
	display: block;
}

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
44
45
46
47
48
49
50
51
52
53
54
<nav>
  <ul>
    <li><a>Men</a>
      <div class="flyout__tab"></div>
      <ul>
        <li><a>T-shirt</a>
          <ul>
            <li><a>item1</a></li>
            <li><a>item2</a></li>
            <li><a>item3</a></li>
            <li><a>item4</a></li>
          </ul>
        </li>
        <li><a>Sweat</a></li>
        <li><a>Bags</a></li>
        <li><a>Shoes</a>
          <ul>
            <li><a>item1</a></li>
            <li><a>item2</a></li>
            <li><a>item3</a></li>
            <li><a>item4</a></li>
          </ul>
        </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>

14/07/2017, 22h07
sinzen

Reaction au post de JefReb

Un grand merci pour ton post..

Je viens de finir mon menu et j'avais des souci avec l'espace entre le menu et le sous menu

mon menu devait être horizontale(menu et sous menu)

je poste le travail réalisé

https://codepen.io/sinzen/full/MoxVRb

tout est résolu maintenant.

Un grand merci et un bon-week a toi!
14/07/2017, 22h52
sinzen

UPDATE

J'aimerais une explication sur l'utilisation de before et after..

pourquoi permet-il de garder une marge sur le hover..?

et encore une autre question..

comment régler la largeur de mon menu et de mon sous menu?

disons que je veux 900px de large pour les deux menus?

merci d'avance.

Je vais essayer de répondre sur ::after et ::before
Un exemple très simple.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
p {
	font-size: 150%;
}
span::before {
	content: "«";
	color: blue;
        font-size: 200%;
}
span::after {
	content: '»';
	color: red;
        font-size: 200%;
}

Code:

Quelques guillemets, dit-il, sont mieux que pas du tout

ce qui donne: https://codepen.io/JefReb/pen/PjLXyN
Mais on peut faire beaucoup de chose avec.

Prenons l'exemple d'un menu.

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
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
* {
	box-sizing: border-box;
}
html, body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
nav ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
nav > ul > li {
	border-right: 1px solid transparent;
}
nav >ul > li ul li {
	border-top: 1px solid transparent;
}
nav a {
	width:144px;  /* largeur par défaut */
	padding: 0;
	display: inline-block;
	text-decoration: none;
	line-height: 28px;
	text-align: center;
	background: rgba(0,90,174,1);
	color: #b1d9ff;
}
/* ========================================================================== 
 *      Il est possible de jouer sur la largeur des sous niveaus	       						  			  			  
 *     Mais attention il faut penser à décaler les niveaux de 3ème niveau  
 *     exemple par défaut: 
 *                         largeur: 144px = 144px + 1px de bordure = 145px
 *                         hauteur: 28px +1px = 29px  
 *                      donc margin:-29px 0 0 145px;  
 */
nav > ul > li ul a {
width: 250px;		/* largeur des seconds niveaux */				
}
/*
 * si la largeur des sous-niveaux à changé 
 * 250px + 1px = 251px
 */
nav > ul > li ul ul {
	margin : -29px 0 0 251px;
}
/* ============================================================================ */
nav > ul > li ul a {
	background: rgba(0,90,174,0.8);
	color: white;
}
nav a:hover {
	text-decoration: underline;
	color: #005aae;
	font-weight: bold;
	background: #b1d9ff;
}
nav a:hover[href="#"] {
	text-decoration: none;  	/* dans ce cas le lien n'est pas surligné  */
}
nav > ul > li {
	float : left;				/* la premier niveau en flottant uniquement */
}
nav li ul {
	position: absolute;			
	visibility: hidden;			
}
nav > ul li:hover ul ul, 
nav > ul ul li:hover ul ul, 
nav > ul ul ul li:hover ul ul {
	visibility: hidden;		
}
nav > ul li:hover ul, 
nav > ul ul li:hover ul, 
nav > ul ul ul li:hover ul {
	visibility: visible;		
	z-index: 1;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav>
<ul>
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="http://www.google.fr">item 1.1</a></li>
      <li><a href="#">item 1.2</a>
        <ul>
          <li><a href="http://www.google.fr">item 1.2.1</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="http://www.google.fr">Item 2</a></li>
</ul>
</nav>

Menu tout simple qui pourra être critiqué, mais qui reste un exemple.
Il est possible de faire apparaîte des petits triangles, indiquant qu'il y a des sous-menus.
Par exemple:

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
nav > ul ul li:first-of-type > a::after {
	content: '';
	position: absolute;
	left: 10px;
	top: -9px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 10px 5px;
	border-color: transparent transparent rgba(0,90,174,0.8);
}
nav > ul ul ul li:first-of-type a::after {
	content: '';
	position: absolute;
	left: -10px;
	top: 10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 10px 5px 0;
	border-color: transparent rgba(0,90,174,0.8) transparent;
}
nav > ul ul li:hover:first-of-type > a::after {
	border-color: transparent transparent #b1d9ff;
}
nav > ul ul ul li:hover:first-of-type a::after {
	border-color: transparent #b1d9ff transparent;
}

Ce qui donne: https://codepen.io/JefReb/pen/PjLXXN

15/07/2017, 10h45
JefReb
Pour la largeur, il me semble que si l'on met:
Code:

1 2 3 ul.top-menu { max-width:900px; }
mais il faut revoir le positionnement des sous menus ...