Bonjour, j'ai créé un menu horizontal sur 2 niveaux. L'affichage de chaque niveau est correcte, est chaque niveau niveau se déroule comme il se doit. Cependant mon problème est le suivant :

Lien de Base "MENU" > au passage de la souris SOUS MENU 1.0 s'affiche

Quand je passe ma souris sur SOUS MENU 1.0 > Il ouvre le niveau suivant avec SOUS CATEGORIE 1.1

Mais lorsque je souhaite cliquer sur SOUS CATEGORIE 1.1 l'intégralité des niveaux se ferme. Je peux laisser la souris sur SOUS MENU 1.0 avec le niveau 2 ouvert ça ne bouge pas, mais des lors que l'on passe sur le niveau 2 pour cliquer tous se ferme

Je souhaiterais donc que lorsque le niveau 2 s'affiche il soit "Bloquer ouvert" afin que je puisse cliquer tranquillement sur ce que je souhaite. Pour ce faire j'ai tenter de "gruger" en incluant une transition sur le hover des niveaux 1&2 mais sa n'a pas fonctionner. Il est toujours possible de cliquer sur SOUS CATEGORIE 1.1 mais c'est du sport pour avoir le bon timing.

Pourriez vous m'éclairer svp.

Mon HTML :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
		<nav>
				<ul id="menu">
					<li><a href="#" class="active">Accueil</a></li>
					<li><a href="#" >MENU</a>
						<ul>
							<li><a href="#">SOUS MENU 1.0</a>
								<ul>
									<li><a href="test.html">SOUS CATEGORIE 1.1</li></a>
								</ul>
							</li>
						</ul>
					</li></ul></nav>

Et voici mon CSS ou doit se trouver l'erreur :

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
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
nav {
	position: absolute;
	top: 25px;
	right: 150px;
	font-family: 'Oswald';
	font-size: 20px;	
	text-transform: uppercase;
	color: #222224;
	font-weight: 300;
	height: inherit;
	line-height: inherit;
	vertical-align: middle;
}
 
/* MENU */
 
#menu{
	list-style:none;
	text-align:center;
}
 
#menu li {
	display:inline-block;
	position:relative;
	background-color: transparent;
	border: 1px solid transparent;
}
 
#menu li a {
	text-decoration:none;
	display:block;
	padding: 0 20px;
	color: rgba(172, 155, 103, 0.375);
	border-radius:5px;
}
 
#menu li:hover {
	color: rgba(172, 155, 103, 0.375);
	text-transform: inherit;
	border: solid 1px rgba(229, 229, 229, 0.1);
	border-radius:5px;
}
 
/* SOUS MENU */
 
#menu li ul{
	position:absolute;
	left: -999em;
	background-color: rgba(54, 50, 51, 0.875);
	border-radius: 5px;
	width: 230px;	
}
 
#menu li:hover ul{
 
	max-height:20em;
	border: solid 1px rgba(229, 229, 229, 0.1);
}
 
#menu li ul li{
	display:inherit;
	border-radius:0;
}
 
#menu li ul li:hover{
	border-radius:0;
}
 
#menu li ul li:hover a {
	color: rgb(172, 155, 103);
}
 
/* 2em NIVEAU */
 
#menu li ul li ul {
	margin: -42px 0 0 11.5em;
}
 
#menu li ul li:hover ul{
	max-height:20em;
}
 
#menu li:hover ul ul {
max-height:0;
overflow:hidden;
transition: .8s all .3s;
}
 
 
#menu li:hover ul, #menu li li:hover ul {
	left: auto;
}
Je vous remercie par avance