[XHTML]pb avec décalage et liste

**trotters213** · 19/09/2006, 14h47

Bonjour,
J'ai un bout de code qui me pose problème : j'ai récupéré un menu déroulant sur Internet (merci blueice

) mais une fois intégré à mon site et que je passe sur une case pour ouvrir la liste ça décale tout ce qui se trouve dessous. je ne comprends pas pourquoi.

Voici le html du menu :

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
<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil"><img name="projets" src="img_ur_vf/projets.gif" alt="" /></a></dt>
	</dl>				
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');"><img name="resultats" src="img_ur_vf/resultats.gif" alt="" /></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();"><a href=""><img name="programmes" src="img_ur_vf/programmes.gif" alt="" /></a></dt>
	</dl>	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');"><img name="partenaires" src="img_ur_vf/partenaires.gif" alt="" /></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>	
...

Le 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
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
 
#menu {
width: 100%; /* précision pour Opera */
}
 
#menu dl {
float: right;
width:110px;
}
 
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
margin: 1px;
}
 
#menu dd {
display: none;
border: 1px solid gray;
}
 
#menu li {
text-align: center;
background: #fff;
/*opacity:0.5; 
filter:alpha(opacity=50); 
-moz-opacity:0.5; 
-khtml-opacity:0.5;*/			
}
 
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
 
#menu li a:hover {
color: #fff;
background-color:#0083d7;
}