Menu déroulant javascript

Bonjour à tous,

Pour réaliser des menus déroulant j'ai utilisé la méthode de construction de menus en css/javascript selon le tutoriel d'alsacrations. Tout fonctionne : lorsque je clique sur un menu celui ci se déroule et mes sous menus sont bien affichés. Seul problème je voudrais qu'en recliquant sur ce menu il se ferme, et tous mes sous menus se cachent. Comment faire? Aidez moi svp. Voici le code que j'ai utilisé:

// Javascript
function MS_expand (element)
{
var d = document.getElementById(element);
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';}
}

// code html
<table border="0" cellpadding="0" cellspacing="0" width="187">
<tr>
<td height="19"><img src="_images/interface/2cols/l_secure_0.gif" width="187" height="19"></td>
</tr>
<tr>
<td height="20">
<div class="menu"><a href="javascript:MS_expand('smenu1')" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btnSecure1','','_images/interface/2cols/l_secure_1_on.gif',0)"><img src="_images/interface/2cols/l_secure_1_off.gif" name="btnSecure1" width="187" height="20" border="0" align="absmiddle"></a>
<div id="smenu1" class="smenu">
<div class="smenu-off"><a href="#">Mes factures</a></div>
<div class="smenu-off"><a href="#">Mes échéances</a></div>
<div class="smenu-off"><a href="#">Créditer mon compte</a></div>
<div class="smenu-off"><a href="#">Historique et solde</a></div>
<div class="smenu-off"><a href="#">Mes informations</a></div>
<div class="smenu-off"><a href="#">Mes contacts</a></div>
<div class="smenu-off"><a href="#">Préférences</a></div>
<div class="smenu-off"><a href="#">Outils</a></div>
<div class="smenu-off"><a href="#">Tarifs</a></div>
</div>
</div>
</td>
</tr>

// CSS
div.menu div.smenu {
z-index: 100;
display: none;
position: relative;
width:187px;
}

div.menu div.smenu-off {
width: 187px;
height: 17px;
}
div.menu div.smenu-off a, div.menu div.smenu-off a:link {
height: 17px;
padding: 2px 0 0 23px;
margin: 0;
display: block;
background-image: url(../fr/_images/interface/2cols/css_smenu_off.gif);
background-position: top left;
background-repeat: no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
/*font-weight: bold;*/
color: #3F3305;
text-decoration: none;
}

div.menu div.smenu-off a:hover {
background-image: url(../fr/_images/interface/2cols/css_smenu_on.gif);
background-position: top left;
background-repeat:no-repeat;
color: #FFFFFF;
text-decoration: none;
}


Merci d'avance !!!!

j'ai eu le meme probleme avec un menu horizontal qui est visible ici et j'ai résolu le probleme en mettant un onmouseout= "javascript:montre(); dans une balise <li>qui contient une fleche..

soit, je ne connait rien en javascript mais peut etre qu'aller voir mon code source vous aidera ?

++

Merci beaucoup d'avoir répondu je vais voir si ca peut m'aider!
++