Menu deroulant horizontal dans un site a largeur fluide

Bonjour,

Je suis en train de créer un site internet, et je trouve tres bien fait les petits tutoriaux. J'ai choisi d'utiliser un menu deroulant que vous pourrez retoruver a cette adresse : menu deroulant

Pour la mise en page, apres avoir bien lu les recommendation sur ce site, j'ai opté pour un site qui sera dans un conteneur 100% comme expliquer a l'adresse suivante: largeur fluide % header+menu+site+footer (la partie centrale dois grandir vers le bas au fur et a mesure qu'on rajoute des informations dans le site)

J'ai donc essayer d'intégrer le menu déroulant au site mais sans succés. En effet, j'aimerai que mon menu fasse la taille du premier niveau (sans les sous menus) et que quand je passerai ma souris devant un element du menu, les sous-menu se mette par dessus le bloc du dessous (la partie centrale ici).

voici mon code CSS

body {
margin: 0;
padding: 0;
background: white;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
#conteneur {
position: absolute;
width: 100%;
}
#header {
/*position: absolute;
top: 0px;
left: 0px;*/
height: 120px;
width: 100%;
background-color: #9CD6FF;
}
#centre {
/*position: absolute;
top: 120px;*/
width: 100%;
background-color:#FFFB9B;
}
/*#pied {
text-align:center;
height: 30px;
background-color: #99CC99;
}*/

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
/*position: absolute;
top: 120px;
left: 0px;*/
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #F3B1D3;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

PS : je veux egalement mettre un pied de page.

J'espere que quelqu'un pourra m'aider.

MERCI d'avance

mon site :