Ami(e) du jour, bonjour

J'ai un probleme avec un menu dans mon site web avec le navigateur Internet Explorer.
Vous pouvez voir les problemes a l'adresse suivante : http://raiders.eysines.free.fr

Le premier probleme est l'espace qu'il y a entre les sous-rubriques. Je souhaite faire disparaitre cette espace vert entre les sous-rubriques.

Le deuxieme probleme est que si on passe la sourie sur le menu bleu, les sous-rubriques bleues disparaissent derrierele menu rouge.
J'ai essayé en mettant z-index, mais ca ne marche pas. Le fait de mettre z-index dans le CSS bloque l'apparition des sous-rubriques.

Ces problemes ne se presentent pas sous Firefox mais uniquement sous IE.


Voici le code HTML du menu
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
   <ul class="menuDeroulant">
   <li><a target="_top" href="$pageactuel"><img src="images/leclub.jpg" border="0"></a>
   <ul class="sousMenu">
   <li><a target="_top" href="pages.php?id=1"><img src="images/histoire.jpg" border="0"></a></li>
   <li><a target="_top" href="pages.php?id=3"><img src="images/palmares.jpg" border="0"></a></li>
   <li><a target="_top" href="pages.php?id=4"><img src="images/contacts.jpg" border="0"></a></li>
   </ul>
   </li>
   </ul>
Voici le code du 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
 
<style type="text/css">
.menuDeroulant {
   background: #CC3333;
   list-style-type: none;
   margin: 0;
   padding: 0;
   border: 0;
}
 
.menuDeroulant li {
   float: left;
   margin: 0;
   padding: 0;
   border: 0;
   behavior:url('menu.htc');
   position:expression('relative');
   display:expression('inline');
   background: #CC3333;
}
 
.menuDeroulant li a:link, .menuDeroulant li a:visited {
   display: block;
   height: auto;
   color: #FFF;
   background: #00ff00;
   margin: 0;
   text-decoration: none;
}
 
.menuDeroulant li a:hover {}
.menuDeroulant li a:active {}
 
.menuDeroulant li ul.sousMenu {
   background: transparent url("fondTR.png") repeat;
   display: none;
   list-style-type: none;
   margin: 0;
   padding: 0;
   border: 0;
   left:expression(0);
   position:absolute;
   visibility:hidden;
}
 
.menuDeroulant li ul.sousMenu li {
   display:block;
   float: none;
   margin: 0;
   padding: 0;
   border: 0;
}
 
.menuDeroulant ul.sousMenu li a:link, .menuDeroulant ul.sousMenu li a:visited {
   display: block;
   color: #CC3333;
   margin: 0;
   border: 0;
   text-decoration: none;
}
 
.menuDeroulant ul.sousMenu li a:hover {
   background-image: none;
   background-color: #CC3333;
}
 
.menuDeroulant li:hover ul.sousMenu {
  visibility:visible;
}
 
.menuDeroulant li:hover>ul.sousMenu {
display: block;
}
 
.menuDeroulant>li {
  display:table-cell;
}
</style>

Avez vous une idée d'où proviendrai le probleme ??
Merci d'avance pour vos reponses. Smile

Merki
Pepit' Wink