Bonjour à tous,
Je rencontre un probleme lors de la création d'un menu déroulant. Il s'affiche parfaitement bien sous Firefox, mais il y'a un décalage qui se produit sur IE. Une image étant plus causante, regardez ci-dessous:
code CSS:
Code html:
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 #head1 { display: block; width: 562px; height: 138px; float: left; } #head2 { display: block; width: 214px; height: 138px; float: left; background: url('../img/header-flash.gif'); } /*Menu deroulant*/ #menu { position:relative; margin-top: 0px; margin-left: 0px; top: 0; left: 0; z-index:200; width: 100%; overflow: hidden; display: block; } #menu dl { float:left; width: 187px; display: block; } #menu dt { cursor: pointer; text-align: center; font-weight: bold; width: 184px; height: 28px; line-height: 31px; margin-left: 3px; background: url('../img/menubut.gif'); overflow: hidden; display: block; } #menu dt.on { background-position: 0 20px; color: white; } #menu dd { border: 1px solid gray; margin-left: 2px; } #menu li { text-align: center; background: #fff; list-style-type: none; } #menu li a, #menu dt a { text-decoration: none; color: #000; height: 100%; border: 0 none; display: block; } #menu li a:hover, #menu dt a:hover { background: #eee; } a { text-decoration: none; color: black; color: #222; } /*barre de sous menu*/ #submenu { clear:left; background: url('../img/submenu.gif'); height: 35px; overflow:hidden; z-index:100; } #submenu ul { list-style: none; display: block; } #submenu li { display: inline; font-size: 80%; } #submenu a { color: #fff; text-decoration: none; font-size: 95%; display: block; float: left; height: 35px; line-height: 38px; font-weight: bold; padding-left: 28px; padding-right: 5px; } #submenu a:hover { text-decoration: underline; }
J'ai essayer de jouer sur z-index, mais rien n'y fait.
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 <div id=head1> <div id=header> <h1><a title=Estima>Estima</a></h1> </div> <div id="menu"> <dl> <dt onMouseOver="javascript:montre('smenu1');" id="on" border="0">Menu 1</dt> <dd id="smenu1"> <ul> <li><a href="#">Sous-Menu 1.1</a></li> <li><a href="#">Sous-Menu 1.2</a></li> <li><a href="#">Sous-Menu 1.3</a></li> </ul> </dd> </dl> <dl> <dt onMouseOver="javascript:montre('smenu2');">Menu 2</dt> <dd id="smenu2"> <ul> <li><a href="#">Sous-Menu 2.1</a></li> <li><a href="#">Sous-Menu 2.2</a></li> <li><a href="#">Sous-Menu 2.3</a></li> </ul> </dd> </dl> <dl> <dt onMouseOver="javascript:montre('smenu3');">Menu 3</dt> <dd id="smenu3"> <ul> <li><a href="#">Sous-Menu 3.1</a></li> <li><a href="#">Sous-Menu 3.2</a></li> <li><a href="#">Sous-Menu 3.3</a></li> </ul> </dd> </dl> </div> </div> <div id=head2> </div> <div id=submenu> <ul> <li><a class=sub1 title="" href="#">vous decrivez votre besoin</A> <li><a class=sub2 title="" href="#">rub1</a> <li><a class=sub3 title="" href="#">rub2</a> <li><a class=sub4 title="" href="#">rub3</a> </li> </ul> </div>
Merci d'avance.
Partager