CSS et menu déroulant sur IE

**feldi** · 11/04/2011, 21h27

Bonsoir,

j'ai un soucis au niveau de mon menu déroulant sur Internet Explorer.
Voici le code de mon menu :

Code php :

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
 
#menu {
 margin-left:13%;
 margin-right:5%;  
 list-style-type:none; 
 text-align:center; 
 }
#menu li {
 float:left; 
 
  list-style-image: url("livre.jpeg");
 
 }
#menu li a {
 display:block;
 width:50px;
 color:black;
 text-decoration:none;
 padding:5px;
 }
#menu li a:hover {
 color:black;
 }
#menu ul li ul {
 display:none;
 }
#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 
 }
#menu li ul {
 position:absolute;
 }

qui met en forme cette partie de code :

Code php :

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
 
<div id="menu">
	<ul id="menu">
		<li><h4> Espace Visualisation <?php echo '&nbsp&nbsp&nbsp&nbsp&nbsp'; ?></h4>
			<ul class="sousMenu">
				<li><a href="livre.php">Livres</a></li>
				<li><a href="film.php">Films</a></li>
				<li><a href="jeux.php">Jeux</a></li>
			</ul>
		</li>
		<li><h4> Espace Ajout <?php echo '&nbsp&nbsp&nbsp&nbsp&nbsp'; ?></h4>
			<ul class="sousMenu">
				<li><a href="AjoutLivre.php">Livres</a></li>
				<li><a href="AjoutFilm.php">Films</a></li>
				<li><a href="AjoutJeux.php">Jeux</a></li>
			</ul>
		</li>
		<li><h4> Espace Edition/Suppression</h4>
			<ul class="sousMenu">
				<li><a href="EditLivre.php">Livres</a></li>
				<li><a href="EditFilm.php">Films</a></li>
				<li><a href="EditJeux.php">Jeux</a></li>
			</ul>
		</li>
	</ul>

La ou il y a problème, c'est que ce menu fonctionne parfaitement sur Mozilla Firefox 3.4 et 4.0 mais pas sur Internet 7 ni 8 (pas testé les autres versions, mais je ne me fais pas d'illusions).
Le problème : sous IE, les sous-menus apparaissent en forme de liste (li) mais décalé de 5 cm vers la droite (environ) et n'apparaissent pas sous forme de liens. De plus, je ne peut pas les sélectionner car le menu se ré-enroule.

J'ai pourtant mis cette ligne de code dans le <head> de mes pages :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">

mais rien n'y fait...

J'ai besoin de votre aide !

Merci !

**Bovino** · 12/04/2011, 10h31

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="menu">
	<ul id="menu">

Pour commencer, un id DOIT être unique dans la page.

**feldi** · 12/04/2011, 21h13

Code php :

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
 
<div id="menu">
	<ul>
		<li><h4> Espace Visualisation <?php echo '&nbsp&nbsp&nbsp&nbsp&nbsp'; ?></h4>
			<ul>
				<li><a href="livre.php">Livres</a></li>
				<li><a href="film.php">Films</a></li>
				<li><a href="jeux.php">Jeux</a></li>
			</ul>
		</li>
		<li><h4> Espace Ajout <?php echo '&nbsp&nbsp&nbsp&nbsp&nbsp'; ?></h4>
			<ul>
				<li><a href="AjoutLivre.php">Livres</a></li>
				<li><a href="AjoutFilm.php">Films</a></li>
				<li><a href="AjoutJeux.php">Jeux</a></li>
			</ul>
		</li>
		<li><h4> Espace Edition/Suppression</h4>
			<ul>
				<li><a href="EditLivre.php">Livres</a></li>
				<li><a href="EditFilm.php">Films</a></li>
				<li><a href="EditJeux.php">Jeux</a></li>
			</ul>
		</li>
	</ul>

En fait, quand on copie du code et qu'on essaye de le modifier par après, forcément ça ne fonctionne plus.
Donc j'ai repris le vrai mode de fonctionnement et tout marche.

Merci, ton conseil m'a mis sur la voie.