Réaliser un menu déroulant avec jQuery

Bonjour,
Par le présent message, je sollicite votre aide sur ce qui suit;
j'aimerai réaliser en jQuery ou en javascript un menu des div qui s'affichent au survol de la sourie mais le blem est que les div s'affiche et ne se cachent pas lorsque je survol un autre menu, ainsi je vous sollicitent de m'aider.
merci
voici le code:

<nav style="margin:auto;">
<ul id="accmnu" >
<li onmouseover="">Acceuil</li>
<li onmouseover="montre('actualitesm')">Actualité</li>
<li onmouseover="montre('appeloffsm')">Appel d'offre</li>
<li onmouseover="montre('forumsm')">Forum</li>
<li onmouseover="montre('locaventesm')" >Location et vente</li>
<li onmouseover="montre('offreempsm')">Offre d'emploi</li>
<li onmouseover="montre('contactsm')">Tourisme</li>
<li onmouseover="montre('tourismsm')">Contactz-nous</li>
</ul>
</nav>
</div>

<div id="cadresousmenu" >
<div id="locaventesm">
</div>
<div id="actualitesm" >
</div>
<div id="appeloffsm" >
</div>
<div id="forumsm" >
</div>
<div id="offreempsm" >
</div>
<div id="contactsm" >
</div>
<div id="tourismsm" >
</div>
</div>
</div>

<style>
#accmnu{
list-style:none;
list-style-image:none;
overflow:hidden;
display:table-cell;
position:relative;
height:38px;
}
#accmnu li{
float:left;
font-family:calibri;
font-size:120%;
text-align:center;
cursor:pointer;
padding-right:17px;
padding-left:17px;
color:#fff;
padding-top:5px;
height:32px;
}
.sousmenu{
width:100%;
height:0px;
background-color:black;
opacity:0.5;
position:absolute;
z-index:1111;
}
.showsmenu{
width:100%;
background-color:black;
opacity:0.5;
position:absolute;
z-index:1111;
height:150px
}
</style>

<script>
function montre(element)
{
var lessousmenu = new Array("locaventesm","actualitesm","appeloffsm","forumsm","offreempsm","contactsm","tourismsm");
var cadresousmenu=$("#cadresousmenu").children();
for (var counrt=0; counrt<lessousmenu.length; counrt++)
{
cadresousmenu.className="sousmenu";
document.getElementById(element).className="showsmenu";
}
}
</script>