ocultar y enseñar div en menu

[hema]

Hoola!!!

Estoy diseñando un menú mediante css - listas donde la persona hace click sobre el tema que le interesa y aparece el contenido. Si hace click sobre otro tema del menú, el contenido anterior se oculta y aparece el nuevo. Esto me funciona bien en un menu de un nivel, pero si tiene varios no me funciona... y no se como cambiar el código javascritp. Alguna ayudita o un tutorial que me pueda orientar? gracias.

El código javascript es el siguiente:

Código HTML:

<script type="text/javascript">
<!--
menu_status = new Array();
var last_expanded = '';
 
function showHide(id)
{
var obj = document.getElementById(id);
 
var status = obj.className;
 
if (status == 'hide') {
 
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
 
obj.className = 'show';
 
last_expanded = id;
} else {
obj.className = 'hide';
}
}
//--> 

</script> 

Y el código del menú sería el siguiente:

Código HTML:

<ul>
<li><a class="menu1" onclick="showHide('mymenu6')">Grupo 1</a></li>	
     <div id="mymenu6" class="hide">
     
     <ul>
     <li><a class="menu1" onclick="showHide('mymenu7')">Grupo 1 - B</a></li>
                        	
                <div id="mymenu7" class="hide">
                <ul>
                <li><a href="#">Elemento1</a></li>
                <li><a href="#">Elemento2</a></li>
                <li><a href="#">Elemento 3</a></li>
                </ul>
                </div>

        </ul>
</ul> 

Y si le doy a Grupo 1 - B desaparece esto y no me aparecen los otros elementos.