Discussion :

[mouna201]

Salut tout le monde,
j'ai un menu vertical en CSS, avec trois niveaux.
lorsque j'essaie de développer le deuxième niveau, je vois les items affichés mais quand j'essaie de cliquer dessus ils disparaissent. (le focus repasse au niveau inférieur)
voici le 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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 170px; 
  list-style: none;
}
 
ul#navmenu li {
	display: block 
	display: inline; 
  position: relative;
}
 
/* Root Menu */
ul#navmenu a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  display: block;
  background: url(../img/fondmenu.gif) 0 -64px;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 100%;
}
 
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: url(../img/fond2.gif) 0 -64px;
  color: #FFF;
}
 
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  background: url(../img/fondmenu.gif) 0 -64px;
  color: #666;
}
 
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background:  url(../img/fond2.gif) 0 -64px;
  color: #FFF;
}
 
/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: url(../img/fondmenu.gif) 0 -64px;
  color: #666;
}
 
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background:  url(../img/fond2.gif) 0 -64px;
  color: #FFF;
}
 
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}
 
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}
 
ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 170px;
}
 
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}
 
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}

[devyan]

Salut,

c'est un peu hors sujet mais un détail de ton css m'étonne...

Tu utilises une astuce pour gérer le hover avec IE semble-t-il.
Normalement ce n'est pas nécessaire si tu remplaces les "li:hover a" par "li a:hover"

A+