Menu javascript bug sous IE

**magicpetro** · 03/11/2008, 11h39

Bonjour tout le monde, j'ai un script fonctionnant parfaitement sous firefox et opera mais sous IE7 il bug, la partie du menu qui se déroule normalement s'affiche mais derrière les menus... on ne voit donc rien

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
<!-- 
function montre(id) 
{
 if (document.getElementById) {document.getElementById(id).style.display="block";}
 else if (document.all) {document.all[id].style.display="block";}
 else if (document.layers) {document.layers[id].display="block";} 
} 
function cache(id) 
{ 
 if (document.getElementById) { document.getElementById(id).style.display="none"; }
 else if (document.all) { document.all[id].style.display="none"; }
 else if (document.layers) { document.layers[id].display="none"; } 
}
//-->
</SCRIPT>
<!-- fin entete de page --><div id="gauche"><ul><li class="menu0" onClick="location.href='?page=01'">Accueil</li>
          <ul id="smenu0" ></ul><li class="menu1" onClick="location.href='?page=02'">Edito</li>
          <ul id="smenu1" ></ul><li class="menu2"  onclick="  cache('smenu1');  cache('smenu2');  cache('smenu3');  cache('smenu4');  cache('smenu5');  cache('smenu6');  cache('smenu7');  cache('smenu8');  cache('smenu9');  montre('smenu2'); ">Le Groupe</li>
          <ul id="smenu2" ><li><a href="index.php?page=0301">ArCan' Alsace</a></li><li><a href="index.php?page=0310">Arcan' Media</a></li><li><a href="index.php?page=0309">Arcan' Sénégal</a></li><li><a href="index.php?page=0302">Creci Formation</a></li><li><a href="index.php?page=0303">Focus Consulting</a></li><li><a href="index.php?page=0304">IBP</a></li><li><a href="index.php?page=0305">Locabureau</a></li><li><a href="index.php?page=0306">Lorinfo</a></li><li><a href="index.php?page=0307">PC Com</a></li><li><a href="index.php?page=0308">Aredia</a></li></ul><script>montre('smenu2')</script><li class="menu3"  onclick="  cache('smenu1');  cache('smenu2');  cache('smenu3');  cache('smenu4');  cache('smenu5');  cache('smenu6');  cache('smenu7');  cache('smenu8');  cache('smenu9');  montre('smenu3'); ">Nos départements</li>
          <ul id="smenu3" ><li><a href="index.php?page=0401">Distribution</a></li><li><a href="index.php?page=0402">Gestion</a></li><li><a href="index.php?page=0403">Formation</a></li><li><a href="index.php?page=0404">CAO / DAO</a></li><li><a href="index.php?page=0405">Impression</a></li><li><a href="index.php?page=0406">Services</a></li><li><a href="index.php?page=0407">Web et Multimédia</a></li></ul><li class="menu4" onClick="location.href='?page=05'">Nos agréments</li>
          <ul id="smenu4" ></ul><li class="menu5" onClick="location.href='?page=06'">Plan du site</li>
          <ul id="smenu5" ></ul><li class="menu6"  onclick="  cache('smenu1');  cache('smenu2');  cache('smenu3');  cache('smenu4');  cache('smenu5');  cache('smenu6');  cache('smenu7');  cache('smenu8');  cache('smenu9');  montre('smenu6'); ">Nos évènements</li>
          <ul id="smenu6" ><li><a href="index.php?page=0701">Flash formation</a></li><li><a href="index.php?page=0702">JPO</a></li><li><a href="index.php?page=0703">Séminaires</a></li><li><a href="index.php?page=0704">Lettre d'information</a></li><li><a href="index.php?page=0708">Sponsoring</a></li></ul><li class="menu7" onClick="location.href='?page=1501'">Promotions</li>
          <ul id="smenu7" ></ul><li class="menu8" onClick="location.href='?page=0901'">Liens utiles</li>
          <ul id="smenu8" ></ul><li class="menu9" onClick="location.href='?page=1001'">Recrutement</li>
          <ul id="smenu9" ></ul></ul></div>

Est-ce que quelqu'un a une solution ?
(je suis en bts et je viens d'arriver dans une entreprise qui me demande de remédier à ce probleme que personne n'a su résoudre...)

**Jumano** · 03/11/2008, 11h53

Bonjour,
Il serait bon de nous montrer également le code CSS correspondant ...

**magicpetro** · 03/11/2008, 11h59

oui c'est vrai

CODE CSS (style.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
 
.menu0 {
	clear: both;
	margin-top: 0px;
	/* width: 120px; */
	height: 20px;
	border: 1px solid #C9CCB1;
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	background: #BCCDE5;
	vertical-align: middle;
	cursor: pointer;
}
 
.menu1 {
	clear: both;
	margin-top: 5px;
	/* width: 120px; */
	height: 20px;
	border: 1px solid #C9CCB1;
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	background: #90A8D4;
	vertical-align: middle;
	cursor: pointer;
}
 
.menu2 {
	clear: both;
	margin-top: 5px;
	/* width: 120px; */
	height: 20px;
	border: 1px solid #C9CCB1;
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	background: #4E85C8;
	vertical-align: middle;
	cursor: pointer;
}
 
.menu3 {
	clear: both;
	margin-top: 5px;
	/* width: 120px; */
	height: 20px;
	border: 1px solid #C9CCB1;
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	background: #0073BF;
	vertical-align: middle;
	cursor: pointer;
}
 
.menu4 {
	clear: both;
	margin-top: 5px;
	/* width: 120px; */
	height: 20px;
	border: 1px solid #C9CCB1;
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	background: #4E8ABC;
	vertical-align: middle;
	cursor: pointer;
}
 
.menu5 {
	clear: both;
	margin-top: 5px;
	/* width: 120px; */
	height: 20px;
	border: 1px solid #C9CCB1;
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	background: #5291D9;
	vertical-align: middle;
	cursor: pointer;
}
 
.menu6 {
	clear: both;
	margin-top: 5px;
	/* width: 120px; */
	height: 20px;
	border: 1px solid #C9CCB1;
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	background: #BCCDE5;
	vertical-align: middle;
	cursor: pointer;
}
 
.menu7 {
	clear: both;
	margin-top: 5px;
	/* width: 120px; */
	height: 20px;
	border: 1px solid #C9CCB1;
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	background: #90A8D4;
	vertical-align: middle;
	cursor: pointer;
}
 
.menu8 {
	clear: both;
	margin-top: 5px;
	/* width: 120px; */
	height: 20px;
	border: 1px solid #C9CCB1;
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	background: #4E85C8;
	vertical-align: middle;
	cursor: pointer;
}
.menu9 {
	clear: both;
	margin-top: 5px;
	/* width: 120px; */
	height: 20px;
	border: 1px solid #C9CCB1;
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	background: #4E85d8;
	vertical-align: middle;
	cursor: pointer;
}
.menu10 {
	clear: both;
	margin-top: 5px;
	/* width: 120px; */
	height: 20px;
	border: 1px solid #C9CCB1;
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	background: #4E85e8;
	vertical-align: middle;
	cursor: pointer;
}
 
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7, #smenu8, #smenu9, #smenu10 {
float: left;
display: none; /* par défaut, les sous-menus ne seront pas affichés */
width: 115px;
font-size: 8px;
color:#FF0000;
padding: 5px 0px 0px 0px;
text-align: center;
cursor: pointer;
}