Script menu horizontal

bonsoir,
Je doit faire un site web je suis en stage et la j'ai besoin de faire un menu et sous menu horizontal mais jarrive pas ai trouver un code mai ca decale ma page a chaque fois quand je clique sur menu ou sous menu

<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>


<style type="text/css">
<!--
/* CSS issu des tutoriels https://www.alsacreations.com/ */
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 9em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background: #37A8C5;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

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

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


<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="http://www.kaaxan.com/index.html" title="Home"><? print ll("Inicio","Home","Accueil","Home"); ?> </a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu1');">Propriétes</dt>
<dd id="smenu1">
<ul>
<li><a href="http://www.kaaxan.com/index.html">Liste</a></li>
<li><a href="http://www.kaaxan.com/index.html">Carte des maisons</a></li>
</ul>

</dd>
</dl>


<dl>
<dt onmouseover="javascript:montre('smenu2');">FAQ</dt>
<dd id="smenu2">
<ul>
<li><a href="http://www.kaaxan.com/index.html">Etapes de la location</a></li>
<li><a href="http://www.kaaxan.com/index.html">Carte des maisons</a></li>
<li><a href="http://www.kaaxan.com/index.html">Vos courses</a></li>
<li><a href="http:/www,kaaxa.com/index.php?page=video">Video</a></li>

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

<dl>
<dt onmouseover="javascript:montre('smenu3');">Services Inclus</dt>
<dd id="smenu3">

<ul>
<li><a href="http://www.kaaxan.com/index.html">Etapes de la location</a></li>
<li><a href="http://www.kaaxan.com/index.html">Etapes de la location</a></li>


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

<dl>
<dt onmouseover="javascript:montre('smenu4');">Riviera Maya</dt>
<dd id="smenu4">
<ul>

<li><a href="http://www.kaaxan.com/index.html">Riviera Maya</a></li>
<li><a href="http://www.kaaxan.com/index.html">Playa del Carmen</a></li>
<li><a href="http://www.kaaxan.com/index.html">Conseils de Voyage</a></li>

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

<dl>
<dt onmouseover="javascript:montre('smenu5');">L'Equipe</dt>
<dd id="smenu5">
<ul>
<li><a href="http://www.kaaxan.com/index.html">L'équipe</a></li>
</ul></dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu6');">Contact</dt>
<dd id="smenu6">
<ul>
<li><a href="http://www.kaaxan.com/index.html">Contact</a></li>
</ul></dd>
</dl>


</div>
est ce que quelqu'un pourra maider svp merci

bonjour j ai tester le menu que vous avez mensionner dans le site https://framalibre.org
et il s est maeché tres tres bien sauf qu a chaque fois j ouvre le navigateur IE8 il m affiche le menu verticalement sous forme de sous titre et il me demende d autoriser le contenu bloquée alors qu est ce que je ferrai pr éviter le probleme et meeeeeeeeeeeeeerci d'avance

Bonjour,

En fait je suis une "printeuse" et tente de comprendre les scripts et ce type d' animation est celui que je recherche depuis un moment...

mais voilà,
c'est du javascript et je ne comprends rien
et j'aimerai savoir si dans l'exemple cité plus haut,
il me serait possible de savoir ou placé les images, etc ?

merci à celui ou celle qui pourra me répondre le plus vite possible