menu desplegable verticalmente

[alfil123]

hola amigos estoy buscando un ejemplo de menu desplegable verticamente
me doy a entender
menu01
menu02
menu03
menu04


al seleccionar menu01 se muestra

menu01
submenu01
submenu02
submenu03
menu02
menu03
menu04

desplasando las otras opciones hasia abajo

busque en la red pero no encuentro
si alguien me ayuda se lo agradeceria?

[Osdiwe]

Primero debes crear tu menú con listas anidadas para crear los distintos niveles. Primero aplicas un display:none a los submenús. Después puedes aplicar un evento onclick que ejecute una función a los enlaces superiores para que muestren los submenús al hacer click, algo así:

document.getElementById('elemento').style.display = 'block';

Con eso debería ser suficiente para mostrar el submenú.

[alfil123]

no entiendo un ejemplo por favor, si fueran tan amables

[Osdiwe]

Ejemplo de código del menú:

Código HTML:

<ul>
    <li><a href="loquesea.html" title="Titulo">Menú 1</a></li>
    <li><a href="javascript:;" onclick="javascript:mostrarSubmenu('submenu1');" title="Titulo">Menú 2</a>
        <ul id="submenu1" style="display:none; visibility:hidden;">
             <li><a href="loquesea.html" title="Titulo">Submenú 1</a></li>
             <li><a href="loquesea.html" title="Titulo">Submenú 2</a></li>
        </ul>
    </li>
    <li><a href="javascript:;" onclick="javascript:mostrarSubmenu('submenu2');" title="Titulo">Menú 3</a>
        <ul id="submenu2" style="display:none; visibility:hidden;">
             <li><a href="loquesea.html" title="Titulo">Submenú 1</a></li>
             <li><a href="loquesea.html" title="Titulo">Submenú 2</a></li>
        </ul>
    </li>
    <li><a href="loquesea.html" title="Titulo">Menú 4</a></li>
</ul> 

Y la función javascript para mostrarlo:

Código:

function mostrarSubmenu(submenu){
    document.getElementById(submenu).style.display = 'block';
    document.getElementById(submenu).style.visibility = 'visible';
}

Espero que te sirva. Para cualquier duda ya lo sabes.