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.


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>
Code du JavaScript
et voici la partie pour que le menu fonctionne sous Internet Explorer
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
 
<PUBLIC:COMPONENT>
   <PUBLIC:ATTACH EVENT="onmouseenter" ONEVENT="showSubMenu()" />
   <PUBLIC:ATTACH EVENT="onmouseleave"  ONEVENT="hideSubMenu()"  />
 
   <SCRIPT LANGUAGE="JScript">
    var menuBackground;
    var menuHighLight = 'rgb(0,255,0)'; // 204,33,33
 
    function showSubMenu() {
      // highlight current item
      menuBackground = style.backgroundColor;
      style.backgroundColor = menuHighLight;
      // z-index;
 
      // get sub menu
      var submenu = getElementsByTagName('ul')[0];
      if (submenu) {
        // workaround for windowed select object bug
        // that ignores zindex values
        var iframe = getElementsByTagName('iframe')[0];
        if (!iframe) {
          iframe = document.createElement('iframe');
          iframe.frameBorder=0;
          iframe.style.display='block';
          iframe.style.position='absolute';
          iframe.style.top=submenu.offsetTop;
          iframe.style.left=0;
          iframe.style.width=submenu.offsetWidth;
          iframe.style.height=submenu.offsetHeight;
          insertBefore(iframe, submenu);
        }
        // show sub menu
        submenu.style.visibility='visible';
        submenu.style.display='block';
        iframe.style.visibility='visible';
      }
    }
 
    function hideSubMenu() {
       // hide submenu
       var submenu = getElementsByTagName('ul')[0];
       if (submenu) {
          submenu.style.visibility='hidden';
          submenu.style.display='none';
          getElementsByTagName('iframe')[0].style.visibility='hidden';
       }
    }
 
   </SCRIPT>
</PUBLIC:COMPONENT>

Je pense que le probleme vient du javaScript car le menu marche sous Firefox et la partie JavaScript ne sert qu'au menu a fonctionner sous Internet Explorer.


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

Merki
Pepit'