Probleme menu déroulant

Bonjour,
Voila, j'ai un menu déroulant et je voudrais quand il se déroule, qu'il passe dessus mes articles. Actuellement dés que l'ouvre mes articles se déplacent vers le bas. le lien de mon site est :

http://acontrejour.net

Je vous envoi le détail de mon menu ci dessous, je pense qu'il faut rajouter un détail, mais ou ? et quoi ?
Merci d'avance de m'aider....

<img src="http://a53.idata.over-blog.com/0/08/49/45/banniere-ACJ2web.jpg" class="CtreText" height="160" width="1200" />
<script type="text/javascript"><!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
// --></script>
<div id="menu"><dl> <dt onmouseover="javascript:montre();"> <a title="Retour à l'accueil"><span style="font-size: 10pt;">Accueil</span></a> </dt> </dl> <dl> <dt onmouseover="javascript:montre('smenu1');"> <span style="font-size: 10pt;">Le Theatractif</span> </dt> <dd id="smenu1">
<ul>
<li> <a href="http://www.acontrejour.net/article-11779323.html"><span style="font-size: 10pt;">Les origines</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-11765335.html"><span style="font-size: 10pt;">Le Theatre de l'opprime</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-846308.html"><span style="font-size: 10pt;">Le Theatractif</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-11626850.html"><span style="font-size: 10pt;">Des choix de prevention</span></a> </li>
</ul>
</dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu2');"> <span style="font-size: 10pt;">Les Themes</span> </dt> <dd id="smenu2">
<ul>
<li> <a href="http://www.acontrejour.net/article-892025.html"><span style="font-size: 10pt;">Virtuel & Ecran</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-892025.html"><span style="font-size: 10pt;">Le Tabagisme</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-881594.html"><span style="font-size: 10pt;">L'alcoolisme</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-887825.html"><span style="font-size: 10pt;">Le Cannabis</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-887675.html"><span style="font-size: 10pt;">Conduites a risque</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-887774.html"><span style="font-size: 10pt;">Le respect</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-11644465.html"><span style="font-size: 10pt;">Le Racisme</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-892672.html"><span style="font-size: 10pt;">Violence & Adolescence</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-921602.html"><span style="font-size: 10pt;">Engagement & Citoyennete</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-892072.html"><span style="font-size: 10pt;">SIDA & Discrimination</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-892045.html"><span style="font-size: 10pt;">Le Mal-etre des Adolescents</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-913544.html"><span style="font-size: 10pt;">La Securite routiere</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-921568.html"><span style="font-size: 10pt;">La Violence Routiere</span></a> </li>
<li> <a href="http://www.acontrejour.net/article-915738.html"><span style="font-size: 10pt;">L'Alimentation</span></a> </li>
</ul>
</dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu3');"> <span style="font-size: 10pt;">L'Equipe</span> </dt> <dd id="smenu3">
<ul>
<li> <a href="http://www.acontrejour.net/article-11697094.html"><span style="font-size: 10pt;">L'equipe</span></a> </li>
</ul>
</dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu4');"> <span style="font-size: 10pt;">Reactions & impressions</span> </dt> <dd id="smenu4">
<ul>
<li> <a href="http://www.acontrejour.net/article-11780063.html"><span style="font-size: 10pt;">en construction</span></a> </li>
<li> <a href="#"><span style="font-size: 10pt;">en construction</span></a> </li>
<li> <a href="#"><span style="font-size: 10pt;">en construction</span></a> </li>
</ul>
</dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu5');"> <span style="font-size: 10pt;">Telechargements</span> </dt> <dd id="smenu5">
<ul>
<li> <a href="http://www.acontrejour.net/article-11779932.html"><span style="font-size: 10pt;">Dossier</span></a> </li>
<li> <a href="#"><span style="font-size: 10pt;">Tarif</span></a> </li>
</ul>
</dd> </dl> <dl> <dt onmouseover="javascript:montre('smenu6');"> <span style="font-size: 10pt;">CONTACT</span> </dt> <dd id="smenu6">
<ul>
<li> <a href="http://www.acontrejour.net/article-11780500.html"><span style="font-size: 10pt;">Contact</span></a> </li>
</ul>
</dd> </dl></div>
<div id="site"> </div>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css"><!--

/* CSS issu des tutoriels https://www.alsacreations.com/ */
body {
margin: 0;
padding: 0;
background: <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
font: 75% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: center;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: left;
background:<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> ;
}
#menu li a, #menu dt a {
color: #fffff;
text-decoration: none;
display: z-index:6000e;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}

a {text-decoration: none;
color: black;
color: #222;
}
--></style>