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>