Menu horizontal décale le contenu situé dessous

Bonjour à tous,

Novice dans le CSS, je me bats actuellement avec le menu horizontal. En effet lorsque je fais dérouler le sous menu celui ci décale le contenu qui se situe dessous.
La page : http://vdrw.free.fr/essai.php

Comment est ce possible puisque le menu à "Z index 100"

Merci de votre aide
@+
Séb.

bonsoir,

les sous menu se doivent d'etre en position:absolu et redimensionné.

#menu dd {
display: none;
border: 1px solid #C0C0C0;
position:absolute;
width:128px;
}

le text-align:center sur dt , risque de poser probleme dans IE.

Alors si c'est le cas tenter ceci:

#menu dt {
	height: 15px;
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	background: #FFFFFF;
	border: 1px solid gray;
	margin: 1px;
	color: #CC3333;
/* pour donner en reference  de positionement */position:relative;
}
#menu dd {
display: none;
border: 1px solid #C0C0C0;
position:absolute;
width:128px;
/* pour garder aligner dans IE avec le dt */left:0;
}

++

p.s. faire Un petit tour sur les differents tuto du net pour comprendre un peu le positionement absolu et relatif et leurs interactions parfois utiles.

Bonjour,

Merci pour votre réponse.
Dans "#menu dd" , j'ai ajouté position:absolute;
width:128px;
En ajoutant ce code, les sous menus ne décalent plus le contenu. Par contre comme vous aviez remarqué le sous menu sous IE s'est décalé à cause de "text-align:center". J'ai utilisé votre deuxième code mais ça n'a pas marché, alors dans "body"

a écrit :
body {
margin: 0;
padding: 0;
background: #FFFFEC;
font: bold 11px Arial, Helvetica, sans-serif;
text-align: left;
}

j'ai changé "text-align: center;" en "text-align: left;" et maintenant tout est rentré dans l'ordre.
voici le CSS fini :

a écrit :
body {
margin: 0;
padding: 0;
background: #FFFFEC;
font: bold 11px Arial, Helvetica, sans-serif;
text-align: left;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 128px;
margin-top: 2px;
margin-bottom: 2px;
}
#menu dt {
height: 15px;
cursor: pointer;
text-align: center;
font-weight: bold;
background: #FFFFFF;
border: 1px solid gray;
margin: 1px;
color: #CC3333;
}
#menu dd {
display: none;
border: 1px solid #C0C0C0;
position:absolute;
width:128px;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #595959;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: url(squelette/images/menuhaut.png) repeat;
color: #FFFFFF;
font: bold 11px Arial, Helvetica, sans-serif;
text-align: center;
}
#site {
position: absolute;
top : 70px;
left : 10px;
color: #00FF66;
background-color: #ddd;
padding: 2px;
border: 1px solid gray;
}

Et le résultat pour le menu : http://vdrw.free.fr/essai.php

Merci beaucoup
@+
Seb

bonjour , et bien joué ... resolu ?

++