Affichage d'un menu par dessus le contenu

Bonjour à tous,

je cherche depuis ce matin mais je but. Je fais un site web classique (j'ai suivie le tuto de pour mettre en forme mon iste web en css)

header
menu
contenue
bas de page.

Et j'ai mis dans le menu un menu déroulant horizontal. Problème c'est que quand je passe dessus, les élément en dessous (dans le contenue) bouge .

Comment fixer pour dire que le menu passe est au-dessus du contenue (pour eviter de déplacer mes autre éléments)

body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	background:#41b7d4;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
}
div#conteneur
{
	width: 1000px ;
	height: auto;
	margin: 0 auto ;
	text-align: left ;
	border: 1px solid #0066CC;
	background: #fff ;
}
h1#header
{
	border-bottom: 1px dashed #41b7d4;	
	height: 100px ;
	background: url(../img/header_1000x100.png) no-repeat left top ;
}
div#menu
{
border: 1px solid #41b7d4;	
width:980px;
height:50px;
z-index: 100;
}
/////////////
/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
	background: #6A6458;
	width: 644px;
	height: 21px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
}
#menuDeroulant li
{
	float: left;
	width: 100px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: 1%;
	color: #FFF;
	background: #3B4E77;
	margin: 0;
	padding: 4px 8px;
	border-right: 1px solid #fff;
	text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 149px;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #FFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
}

#menuDeroulant li:hover > .sousMenu { display: block; }

//////////////

div#contenu
{
margin: 0px 0px 0 10px ;
float: left ;
display: block ;
width:820px;
border-left: 2px dashed #41b7d4;
border-right: 2px dashed #41b7d4;
overflow: auto;
z-index: 1;
}
div#contenu h2
{
	margin: 0 10px 0 10px;
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.4em ;
	color: #FF6600 ;
	background: url(../img/bouton.jpg) no-repeat left bottom ;
	border-bottom: 1px solid #41b7d4 ;
	border-left: 1px solid #41b7d4 ;
}

div#information
{
clear: left;
margin: 10px auto;
padding: 0 15px 0 0;
text-align: right ;
color: #0066CC ;
}

Je voudrait utiliser z-index, mais je n'y arrive pas (j'ai fait des essais).

Quelqu'un pourrait-il me dire ou j'ai commis mes erreurs? ou comment placer le z-index?

Merci d'avance pour votre aide

guigui69

Pour que le z-index marche il faut préciser un attribut position, soit relative, soit absolute