Problème programmation menu déroulant

Bonjour à tous.

Voila, j'ai un petit problème dans la programmation d'un menu.

J'aimerais avoir un menu dynamique, qui en cliquant dessus déroule les sous menus.  J'ai mis une capture d'écran pour bien visualiser.  Donc en cliquant sur menu, je peux faire apparaitre ou disparaitre le sous menu.

Cela fonctionne bien, mais la ou est le problème, c'est qu'en ouvrant la page, j'aimerais que les sous menus ne s'affichent pas.  Or comme programmé maintenant, lorsque je lance la page web, j'obtiens la première image! alors que je voudrais avoir la deuxième

Et c'est la que ca coince!
Donc si quelqu'un pourrait m'aider à ce sujet, ce serait bien sympatique!  C'est surement un petit truc; mais je vois pas

Merci pour votre aide

Voici le code de ce menu :

<SCRIPT LANGUAGE="JavaScript">
if(document.images)
{
im0 = new Image;
im0 = "images/menu_ico2.jpg";
}
</SCRIPT>
<style type="text/css">
body {
 background-color: #B2B4BF;
}
.Menu {
 font-family: "Comic Sans MS";
 font-size: 16px;
 color: #398AFD;
}
.Menu_list {
 font-family: "Comic Sans MS";
 font-size: 14px;
 color: #003366;
 margin: 0px 29px;
}
.Menu_sel {
 font-family: "Comic Sans MS";
 font-size: 14px;
 color: #0066CC;
 margin: 0px 29px;
 font-weight: bold;
}
</style>
<table width="286" border="0" cellpadding="0" cellspacing="1">
  <tr>
    <td width="371" background="images/title_bar2.jpg" class="Menu" id="t_menu1" onClick="t_menu('t_menu1','t_menu1_list','t_im1');"><img src="images/title_bar_fleche2.jpg" width="29" height="25" align="absmiddle" id="t_im1">Menu</td>
  </tr>
  <tr id="t_menu1_list">
    <td bgcolor="#C7D5F0">
 <a href = "araginsides.asp" id="menu1" class="Menu_list" onMouseOver="menu_sel('menu1','im1');" onMouseOut="menu('menu1','im1');"><img src="images/menu_ico1.jpg" width="10" height="10" id="im1"> menu text 1</a><br \>
 

 <a id="menu2" class="Menu_list" onMouseOver="menu_sel('menu2','im2');" onMouseOut="menu('menu2','im2');"><img src="images/menu_ico1.jpg" width="10" height="10" id="im2"> menu text 2</a><br \>
 <a id="menu3" class="Menu_list" onMouseOver="menu_sel('menu3','im3');" onMouseOut="menu('menu3','im3');"><img src="images/menu_ico1.jpg" width="10" height="10" id="im3"> menu text 3</a>
    </td>
  </tr>

</table>
<p>&nbsp;</p>

<script type="text/javascript">
function menu(nom,im)
{
 document.getElementById(im).src='images/menu_ico1.jpg';
 document.getElementById(nom).className="Menu_list";
}
function menu_sel(nom,im)
{
 document.getElementById(im).src='images/menu_ico2.jpg';
 document.getElementById(nom).className="Menu_sel";
}

function t_menu(nom,nom_list,im)
{
 if ( document.getElementById(im).src.indexOf('title_bar_fleche2.jpg') != -1 ) {
  document.getElementById(im).src='images/title_bar_fleche1.jpg';
  document.getElementById(nom).background='images/title_bar1.jpg';
  document.getElementById(nom_list).style.display='none';
 }
 else {
  document.getElementById(im).src='images/title_bar_fleche2.jpg';
  document.getElementById(nom).background='images/title_bar2.jpg';
  document.getElementById(nom_list).style.display='block';
 }
}

</script>