Bonjour aux passionnés.
Comme je suis toujours curieux d'apprendre et de comprendre, je décortique les nombreux forums qui sont des sources d'acquisition importantes.
En répondant à un participant sur un menu, j'ai proposé le code de NoSmoking pour y répondre.
Mais j'ai voulu aller plus loin et comprendre d'avantage le code. J'ai expurgé tout le "cosmétique" pour ne garder que l'essentiel.
Mais je bute sur le caractère mis par :before qui est trop prêt du texte et le 2ème sous-menu est lui aussi trop décalé vers la gauche.

Un petit code pen:
http://codepen.io/JefReb/pen/egyOwZ
Et le code css et html.
Si il y en a un, qui a du temps, pour se pencher sur mon erreur, je le remercie d'avance.
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
body {
	width: 500px;
	margin: 0 auto;
}
nav {
	width: 200px;
	margin: 0;
	padding: 0;
	background: #CCC;
	border: 1px solid #333;
	line-height: 2em;
	height: 2em;
	cursor: pointer;
}
nav ul, nav li {
	position: relative; 
	margin: 0;
	padding: 0;
	list-style: none;
}
nav li {
	line-height: 2em;
	color: #000;
}
nav ul > li {
	float: left;
	display: inline-block;
	line-height: 2em;      
	color: #000;           
	padding: 0 1em;
}
nav ul > li a {
	display: block;
	color: inherit;        
	text-decoration: none;
}
nav li > ul li:before {
	content: "\0025BA";
	float: right;
	color: #333;
	z-index: -1;
}
nav li:hover {
	background: #333;
	color: #fff;
}
nav li ul {
	position: absolute;
	left: 0;
	top: 100%;
	height: 0;
	width: 0;
	opacity: 0;
	background: #fff;
	border: 1px solid #333;
}
nav li li ul {
	left: 100%;            
	top: -1px;             
}
nav li:hover > ul {
	height: 8em;
	width: 10em;
	opacity: 1;
}
et
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
<nav>
  <ul>
    <li>Menu 1
      <ul>
        <li>Sous Menu 1</li>
        <li>Sous Menu 2
          <ul>
            <li>Sous Menu 2.1</li>
            <li>Sous Menu 2.2</li>
            <li>Sous Menu 2.3
              <ul>
                <li>Sous Menu 2.3.1</li>
                <li>Sous Menu 2.3.2</li>
              </ul>
            </li>
            <li>Sous Menu 2.4</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Menu 2</li>
  </ul>
</nav>
Et merci à NoSmocking