Menu horizontal sur IE et Firefox en CSS3

**fethi510** · 08/06/2014, 15h03

Bonjour,
Je viens par la présente vous demander de bien vouloir m'aider a propos d'un probleme dont j'arrive pas a trouver la solution,
J'ai créé un site web pour mon projet de fin d'études qui comporte un menu horizontal, le menu comporte des sous menu et un deuxième niveau de sous menu.
Le probleme qui se pose est sur internet explorer, le menu descend d'une ligne sur IE et quelques versions de firefox anterieures, (Newsletter qui descend en bas) donc le menu n'est plus sur une ligne mais sur deux, ce menu est completement fait avec CSS3 (pas de Jquery).
Je vous présente un screenshot du probleme:
CAS OU LE PROBLEME NE SE POSE PAS (Chrome et Firefox derniere version):

Nom : Screenshot_2.jpg
Affichages : 117
Taille : 30,8 Ko

Et ceci est mon probleme SOUS IE :

Nom : Screenshot_3.jpg
Affichages : 108
Taille : 40,8 Ko

De plus, les sous menus ne s'affichent plus des que je quitte le menu principal (sur IE), genre ils disparaissent avant que la souris est dedans, et ça me pose de gros soucis.
Il y'a aussi un troisieme probleme:
Quelques sous menus s'affichent avec un arriere plan blanc alors que sur les autres navigateurs (les nouveaux le probleme ne se pose pas)
Etat normal:

Nom : Screenshot_4.jpg
Affichages : 108
Taille : 38,1 Ko

Etat pas normal:

Nom : Screenshot_4.jpg
Affichages : 111
Taille : 46,7 Ko

Voici le code source:
HTML:

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
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
<nav class="menu">
<ul id='menu'>
	<li class='principale' id='menuFirstElement' >
		<a href="presentation.php">Presentation</a>
	</li>
	<li class='principale'>
	<a>Services aux entreprises</a>
		<ul>
			<li class='lvl1'>
				<a href="services-algerienne.php">Algeriennes</a>
			</li>
			<li class='lvl1'>
				<a href="services-belges.php">Belges</a>
			</li>
		</ul>
	</li>
	<li class='principale'>
            <a href="appel-offres.php">Appels d'offres</a>
	</li>
	<li class='principale'>
	<a>Actualites</a>
		<ul>
			<li class='lvl1'>
				<a href="actualite-algerie.php">Actualites en Algerie</a>
			</li>
			<li class='lvl1'>
				<a href="actualite-poste.php">Actualites du poste</a>
			</li>
			<li class='lvl1'>
				<a href="accords-uea.php">Actualites Accords UE-Algerie</a>
			</li>
		</ul>
	</li>
	<li class='principale'>
	<a>Partenariat</a>
		<ul>
			<li class='lvl1'>
				<a href="partenariat-algerie.php">Algerie</a>
			</li>
			<li class='lvl1'>
				<a href="partenariat-belgique.php">Belgique</a>
			</li>
		</ul>
	</li>
	<li class='principale'>
	<a>Informations et liens utiles</a>
 
					<ul>
 
					<li class='lvl1'> <a>Belgique</a>
						<ul>
							<li>
								<a href="publications-belgique.php">Publications sectiorielles</a>
							</li>
							<li>
								<a href="salon-belgique.php">Salons</a>
							</li>
							<li>
								<a href="voyage-belgique.php">Votre voyage en Belgique</a>
							</li>
							<li>
								<a href="liens-belgique.php">Liens utiles</a>
							</li>
						</ul>
					</li>
					<li class='lvl1'><a>Algerie</a>	
						<ul>
							<li>
								<a href="publications-algerie.php">Publication sectiorielles</a>
							</li>
							<li>
								<a href="salon-algerie.php">Salons</a>
							</li>
							<li>
								<a href="voyage-algerie.php">Votre voyage en Algerie</a>
							</li>
							<li>
								<a href="liens-algerie.php">Liens utiles</a>
							</li>
							<li>
								<a href="accords.php">Accords</a>
							</li>
 
						</ul>
						</li>
					</ul>
	</li>
	<li class='principale'>
		<a href="filiales-belges.php">Filiales Belges</a>
	</li>
	<li class='principale'>
            <a href="newsletter.php" id='premiere'>Newsletter</a>
	</li>
	</ul>
</nav>

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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
#menu, #menu ul{
margin:0;
padding:0;
list-style:none;
}
#menu{
width:992px;
margin:30px auto;
background-color:black;
background-image:linear-gradient(#444, #111);
}
#menu li ul .lvl1{
background-color:#FC2E2E;
}
li:last-child{
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
}
#menu:before,
#menu:after{
content:"";
display:table;
}
#menu:after{
clear:both;
}
#menu{
zoom:1;
}
#menu li{
float:left;
border-right:1px solid #222;
-webkit-box-shadow:1px  0 #444;
-moz-box-shadow:1px  0 #444;
box-shadow:1px  0 #444;
position:relative;
}
#menu a{
/*Couleur du menu*/
float:left;
padding:7px 7px;
color:white;
text-transform:uppercase;
font:bold 12px Arial, Helvetica;
text-decoration:none;
}
li:first-child{
-webkit-border-radius:3px 3px 0 0;
-moz-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
border-bottom:0px solid transparent;
}
#menuFirstElement{
border-left:1px solid #222;
margin-left:4px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
#menu li:hover > a{
color:white;
}
*html #menu li a:hover{
/* IE6 only */
color:white;
}
#menu ul{
margin:20px 0 0 0;
_margin:0;
/*IE6 only*/
opacity:0;
visibility:hidden;
position:absolute;
top:35px;
left:0;
z-index:1;
background:#444;
background:-webkit-gradient(linear,left top,left bottom,from(#444),to(#111));
background:-webkit-linear-gradient(#444, #111);
background:-moz-linear-gradient(#444, #111);
background:-o-linear-gradient(#444, #111);
background:linear-gradient(#444, #111);
-webkit-box-shadow:0 -1px 0 rgba(255,255,255,.3);
-moz-box-shadow:0 -1px 0 rgba(255,255,255,.3);
box-shadow:0 -1px 0 rgba(255,255,255,.3);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}
#menu li:hover > ul{
opacity:1;
visibility:visible;
margin:0;
}
#menu ul ul{
top:0;
left:150px;
margin:0 0 0 20px;
_margin:0;
/*IE6 only*/
-webkit-box-shadow:-1px 0 0 rgba(255,255,255,.3);
-moz-box-shadow:-1px 0 0 rgba(255,255,255,.3);
box-shadow:-1px 0 0 rgba(255,255,255,.3);
}
#menu ul li{
float:none;
display:block;
border:0;
_line-height:0;
/*IE6 only*/
-webkit-box-shadow:0 1px 0 #111, 0 2px 0 #666;
-moz-box-shadow:0 1px 0 #111, 0 2px 0 #666;
box-shadow:0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child{
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#menu ul a{
padding:10px;
min-width:120px;
_height:10px;
/*IE6 only*/
display:block;
white-space:nowrap;
float:none;
text-transform:none;
border-bottom:1px dotted;
}
#menu ul a:hover{
background-color:white;
background-image:linear-gradient(#FC2E2E, #FC2E2E);
}
#menu ul li:first-child > a{
-webkit-border-radius:3px 3px 0 0;
-moz-border-radius:3px 3px 0 0;
border-radius:3px 3px 0 0;
background-color:#FC2E2E;
}
#menu ul li:first-child > a:after{
content:'';
position:absolute;
left:40px;
top:-6px;
border-left:6px solid transparent;
border-right:6px solid transparent;
border-bottom:6px solid #FC2E2E;
}
#menu ul ul li:first-child a:after{
left:-6px;
top:50%;
margin-top:-6px;
border-left:0;
border-bottom:6px solid transparent;
border-top:6px solid transparent;
border-right:6px solid #FC2E2E;
}
#menu ul li:first-child a:hover:after{
border-bottom-color:#FC2E2E;
}
#menu ul ul li:first-child a:hover:after{
border-right-color:#FC2E2E;
border-bottom-color:transparent;
}
#menu ul li:last-child > a{
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
border-bottom:0px solid transparent;
background-color:#FC2E2E;
}
.lvl1 a{
background-color:#FC2E2E;
}

Merci de bien vouloir m'aider, car je suis vraiment dans une situation confuse