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
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 <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>
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
Partager