Discussion :

[paroxyste]

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

[JefReb]

Une approche ...

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
nav {
	font-family: 'Oswald';
	font-size: 20px;
	font-weight: 300;
}
nav ul {
	line-height: 86px;
	list-style: none;
	text-align: center;
	padding: 0;
	margin: 0;
	text-transform: uppercase;
}
nav a {
	display: block;	
	text-decoration: none;
	margin:0;
	padding: 0;
	color: black;
}
nav a {
	width: 150px;
}
nav li ul ul a {
	width: 200px;
}
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 {								
	margin : -28px 0 0 150px;
	border-left : 1px solid transparent;
}
nav li:hover ul ul {
	display: none;
}
nav li a:hover {
	background-color: blue;
	color: #FFFFFF;
	text-decoration: underline;
}
nav li:hover ul, nav li li:hover ul {
	display: block;
}

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
<nav>
  <ul>
    <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>

Les couleurs ne sont pas les tiennes ainsi que les réglages largeur, hauteur, padding, mais ...

Résultat: https://codepen.io/JefReb/pen/PjLvgQ

[paroxyste]

Bonjour, et merci pour votre réponse, j'ai réussi à résoudre mon problème. Le problème venait du simple fait que le niveau 2 n'était pas collé/superposé au niveau 1.

Cordialement