Menu déroulant html problème

Bonjour,

J'ai besoin de votre aide la plus vite possible.
J'ai fait un menu déroulant pour mon site, il fonctionne très bien, seul problème c'est que lorsque je met du texte en dessous, et que je passe la souris sur un onglet du menu déroulant, le menu déroulant se mélange avec le texte d'en dessou au lieu de se mettre par dessus.
voici le code html :

<div id="conteneur-menu"
<div id="menu">
<dl>
<dt>accueil</dt>
<dd>
<ul>
<li><a href="#">accueil</a></li>
</ul>
</dd>
</dl>

<div id="menu">
<dl>
<dt>présentation</dt>
<dd>
<ul>
<li><a href="#">Historique</a></li>
<li><a href="#">Bureau - C.A.</a></li>

</ul>
</dd>
</dl>

<div id="menu">
<dl>
<dt>disciplines</dt>
<dd>
<ul>
<li><a href="#">Obéissance</a></li>
<li><a href="#">Ring</a></li>
<li><a href="#">Mondioring</a></li>
<li><a href="#">Campagne</a></li>
<li><a href="#">Pistage</a></li>
</ul>
</dd>
</dl>
</div>
</div>

Pouvez vous m'aider svp? Y a t-il une erreur dans mon code, ou une balise à rajouter ?
Merci dvc