Mon ménu déroulant décale tous les éléments qui se trouvent après

Bonjour à tous.

Donc, quand les sous-menu se déroulent, tous les éléments qui suivent dans le site se décalent. Je pense qu'il s'agit d'un problème de positionnement et z-index, mais pas moyen de trouver.

Merci d'avance pour votre aide.

CSS
#menu {
height: 33px;
width: 990px;
}
#menu ul { /* liste des rubriques visibles par défaut */
margin:0; /* annulation de toute marge externe */
padding:0; /* annulation de toute marge interne */
list-style-type:none; /* mise à l'horizontale des éléments de la liste */
text-align:center;
}
#menu li { /* style pour les élements de la liste principale */
float:left; /* mise à l'horizontale */
margin:auto; /* centrage de l'élément de liste */
padding:0; /* annulation de toute marge interne */
background-color:#FFF; /* hauteur de l'élément de liste */
}
#menu li a { /* lien présent dans la liste principale */
display:block; /* largeur de la surface de clic */
color:#000000; /* couleur noire du texte */
text-decoration:none; /* marge interne autour du lien */
border-right:dotted 1px #eeeeee; /* ajout d'un trait de séparation à droite de chaque item */
}
#menu li a:hover { /* survol du lien de la première liste */
color:#000; /* couleur blanche du texte lors du survol */
background-color: #00F;
}
#menu ul li ul { /* sous-liste */
display:none; /* cachée par défaut */
position: relative;
z-index: 2;
}
#menu ul li:hover ul { /* affichage de la sous-liste quand on passe la souris sur la liste principale */
display:block;
}
#menu li:hover ul li { /* correction nécessaire pour IE */
float:none;
}
#menu li ul li{ /* trait de séparation sous chaque item du menu déroulant */
border-top:dotted 1px #eeeeee;
}
.li1 {
width: 407px;
}
.li2 {
width: 100px;
}
.li3 {
width: 100px;
}
.li4 {
width: 100px;
}
.li5 {
width: 100px;
}
.li6 {
width: 100px;
}
.li7 {
width: 50px;
}
.li8 {
width: 33px;
}
#menu ul li a {
position: relative;
z-index: 2;
}

Code du menu
<div id="menu">
<ul>
<li class="li1"><a href="#">Nos locations</a>

<ul>
<li><a href="#">Le Paradisier</a></li>
<li><a href="#">Les Oliviers</a></li>
<li><a href="#">La Pascaline</a></li>
<li><a href="#">La Noélie - rez de jardin</a></li>
<li><a href="#">La Noélie - 1er étage</a></li>
<li><a href="#">L'Eugénie</a></li>
<li><a href="#">La Maison d'Odon</a></li>
<li><a href="#">La Noélie - villa entière</a></li>
<li><a href="#">Le Bonheur Orangé</a></li>
<li><a href="#">Le Soleil</a></li>
</ul>
</li>
</ul>

<ul>
<li class="li2"><a href="#">Tarifs</a>
<ul>
<li><a href="#">Tarifs semaine</a></li>
<li><a href="#">Tarifs nuitée</a></li>
<li><a href="#">Tarifs longues périodes</a></li>
<li><a href="#">Locations vides</a></li>
</ul>
</li>
</ul>

<ul>
<li class="li3"><a href="#">Promotions</a>
<ul>
<li><a href="#">Last minute</a></li>
<li><a href="#">Early booking</a></li>
</ul>
</li>
</ul>

<ul>
<li class="li4"><a href="#">Réservez</a>
<ul>
<li><a href="#">Comment faire?</a></li>
<li><a href="#">Contrat type</a></li>
<li><a href="#">Conditions générales</a></li>
<li><a href="#">Formulaire</a></li>
</ul>
</li>
</ul>

<ul>
<li class="li5"><a href="#">Contact</a>
<ul>
<li><a href="#">Nous joindre</a></li>
<li><a href="#">Formulaire</a></li>
</ul>
</li>
</ul>

<ul>
<li class="li6"><a href="#">Bons plans</a>
<ul>
<li><a href="#">Nos avantages</a></li>
<li><a href="#">Hébergements de qualité</a></li>
<li><a href="#">Chèques vacances</a></li>
<li><a href="#">Visiter à proximité</a></li>
<li><a href="#">Nos bonnes adresses</a></li>
<li><a href="#">Activités sympas</a></li>
<li><a href="#">Sites amis</a></li>
</ul>
</li>
</ul>

<ul>
<li class="li7"><a href="../index.html"><img src="../nav/flags/flag_f.png" width="50" height="33" /></a>
<ul>
<li><a href="../index_gb.html"><img src="../nav/flags/flag_gb.png" width="50" height="33" /></a></li>
<li><a href="../index_de.html"><img src="../nav/flags/flag_d.png" width="50" height="33" /></a></li>
<li><a href="../index_it.html"><img src="../nav/flags/flag_it.png" width="50" height="33" /></a></li>
<li><a href="../index_nl.html"><img src="../nav/flags/flag_nl.png" width="50" height="33" /></a></li>
<li><a href="../index_sp.html"><img src="../nav/flags/flag_sp.png" width="50" height="33" /></a></li>
<li><a href="../index_pl.html"><img src="../nav/flags/flag_pl.png" width="50" height="33" /></a></li>
</ul>
</ul>

<ul>
<li class="li8"><img src="../logos/reseaux/facebook.png" width="33" height="33" />
<ul>
<li><img src="../logos/reseaux/twitter.png" width="33" height="33" /></li>
</ul>
</li>
</ul>
</div>

Bonjour,

Il faut que tes sous-menus soient en position absolute (au lieu de relative comme actuellement) pour éviter ce désagrément.

Bon courage.