[CSS] superposition - decallage
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:
http://collectifheaven.free.fr/site/bug.jpg
code CSS:
Code:
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;
} |
Code html:
Code:
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> |
J'ai essayer de jouer sur z-index, mais rien n'y fait.
Merci d'avance.
