Modification d'un menu CSS "tout fait"

Bonjour à tous, je sais qu'il s'agit ici de mon tout 1er message et que dès lors je ne me suis même pas présenté mais étant en retard au niveau de mon boulot je vais à l'essentiel .

Il s'agit d'un problème pour un projet que j'ai à terminer pour mes études.
J'ai repris le menu expliqué dans ce tutoriel. Je l'ai même un peu "amélioré" en rajoutant du javascript pour les pauvres IE... .

Seulement maintenant je constate un problème qui m'ennuie fortement, j'ai du texte directement en dessous le menu et dès que je déroule un sous-menu tout mon texte est décalé... problème de float?

Bref çà serait vraiment sympathique si quelqu'un pouvait m'aider à ce niveau.
Pour faciliter la tâche, je vous donne le CSS actuel de ma page.

@CHARSET "ISO-8859-1";
body
{
 font: 11px verdana, sans-serif;
 margin: 0;
 padding: 0;
}
.form label {
	position:absolute;
	left:100px; 
	height:40px;
}
.form input {
	position:absolute;
	left:200px; 
	height:40px;
}
#menuDeroulant li
{
 float: left;
 width: 200px;
 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 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 form
{
 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 .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 199px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li:hover > .sousMenu { display: block; }
#menuDeroulant
{
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 position: relative;
 top: 0px;
 left: 0px;
}

Merci d'avance !

Bonjour,

Suggestion: positionner le menu en absolu (mais sans les coordonnées top et left).

Merci, avec un petit z-index le tour était joué !
Il me reste encore un soucis... je n'arrive pas à centrer ce menu...