menu desplegable

[mancemo]

hola a todos, tengo el siguiente codigo

Código HTML:

<style type="text/css">

ver_menu {

         display:block;

}

.ocultar_menu {

         display:none;

}
</style>

<script type="text/JavaScript">

function desplegar(categoria){

var menu = document.getElementById(categoria);
var menu1 = document.getElementById('home');
var menu2 = document.getElementById('products');

if (categoria == 'home')
{
	menu2.className = "ocultar_menu";
}

if (categoria == 'products')
{
	menu1.className = "ocultar_menu";
}


    if(menu.className == "ver_menu")
	{
      menu.className = "ocultar_menu";
    }

    else
	{
      menu.className = "ver_menu";
    }

}
</script>

	  <a href="javascript:desplegar('home);"><IMG SRC="imagesnew/btn-sms.gif" WIDTH="185" HEIGHT="28" BORDER=0 ALT=""></a>
	</div>

 <ul class="ocultar_menu" id="home">

	 <a href="productos2.php?tipo=1"><IMG SRC="imagesnew/micropagos.gif" WIDTH="100" HEIGHT="20" BORDER=0 ALT=""></a>
	 <a href="productos2.php?tipo=2"><IMG SRC="imagesnew/chat2p.gif" WIDTH="100" HEIGHT="20" BORDER=0 ALT=""></a>
 </ul>

 <div class="cat"><a href="javascript:desplegar('products');"><img src="imagesnew/btn-mms.gif" width="185" height="28" border=0 alt=""></a></div>

 <ul class="ocultar_menu" id="products">

	 <a href="productos2.php?tipo=11"><IMG SRC="imagesnew/tvchatmms.gif" WIDTH="100" HEIGHT="20" BORDER=0 ALT=""></a>
	 <a href="productos2.php?tipo=12"><IMG SRC="imagesnew/chatopmms.gif" WIDTH="100" HEIGHT="20" BORDER=0 ALT=""></a>
 </ul>	
 
 

lo que hace es un menu desplegable al darlo click en la imagen ke llama a la funcion desplegar, lo que intento hacer ahora y no he podido, es que al darle click al menu home este se quede desplegado mostrando todo su submenu, por que al mostrar este sub menu se vuelve a esconder el menu, no se si soy muy claro.

Gracias.