Menu horizontal déroulant...3 soucis

Bonjour à tous

Je rencontre quelques soucis avec mon menu déroulant
1) les sous-menus ne s'affichent pas entièrement malgré le z-index
2) les items survolés poussent les autres items du menu
3) quand on survole le menu, il déplace complètement mon bloc en dessous; j'ai déjà essayé d'attribuer un position:absolute au menu ; c'est mieux sauf que tous les blocs (en-tête, menu, corps) se collent l'un à l'autre

Voici mon code CSS :

body{position:relative;
width:800px;
margin:auto;
background-color:rgb(255,248,229);
}

#en_tete{
position:relative;
width:800px;
height:130px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
background-image:url("");}


a
{text-decoration:none;
color:black;}

.img{float:left;
margin: 0 6px 6px 0;} 

#corps{position:relative;
width:auto;
padding-left:5px;
padding-top:10px;
padding-bottom:10px;
border-bottom: 3px solid #e7be81;
border-top: 3px solid #e7be81;
border-right: 3px solid #e7be81;
border-left: 3px solid #e7be81;
color:black;
text-align:justify;
background-color:rgb(254,252,245);
background-repeat:repeat-y;
font-family:"Trebuchet MS";
z-index:1;
background-image:url("")
}

#centerbold p{text-align:center;font-weight:bold}

#justify p{text-align:justify}

.centerbold{text-align:center;font-weight:bold}

ul#menu_horizontal {  
width : 800px;
height : 30px;
vertical-align:middle;
list-style-type : none; 
background-image:url('');
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
padding-top:3px;
font-family:'Trebuchet MS';
font-size:13px;
font-weight:bold;
z-index:2;

}

#menu_horizontal ul{padding:0;margin:0;}

ul#menu_horizontal li {
padding : 0 1.9em 0 0;
position:relative;
margin-top:auto;
margin-bottom:auto;
padding-top:3px;
list-style-type:none;
}

ul ul {display:none;list-style-position:inside;}
li:hover > ul {display:block;}


li.bouton_gauche { 
float : left;margin-top:auto;
margin-bottom:auto;
padding-top:3px;
list-style-type :none;
}


li.bouton_droite {
float : left;margin-top:auto;
margin-bottom:auto;
padding-top:3px;
list-style-type :none;
}

Et voici un lien pour voir ce que ça donne : efelcenter.fr/essai

Un grand merci d'avance à vous !

Moonlit-Sunset
Modifié par Moonlit-Sunset (13 Apr 2011 - 11:48)

Rajoute simplement la règle position:absolute; à ul#menu_horizontal. Enfin, si c'est bien ça que tu souhaites faire.
Modifié par ZeB_panam (13 Apr 2011 - 08:44)

Merci, en effet j'avais déjà fait cela et ça m'avait rapproché tous les blocs. J'avais juste à les repositionner.

En revanche, je n'ai toujours pas de solution pour mon problème 2 (chaque item du menu, une fois survolé, pousse les autres items du menu vers la droite).

Pourriez-vous m'aider ?

Merci d'avance