Menu contractil tunait, editar para subopciones dentro de subopcion

[tunait]

Claro, mira la función javascript es esta

Código:

function Menu(el){
   elemento = el.parentNode.getElementsByTagName('ul')[0]
   elemento.style.display = elemento.style.display == 'none' ? 'block' : 'none'
}

y el código html del menú del ejemplo es este

Código HTML:

<ul id="menu">
      <li><strong onclick="Menu(this)">Apartado 1</strong> 
         <ul>
            <li><strong onclick="Menu(this)">secci&oacute;n 1</strong>
		  <ul>
                      <li>seccion 1-b</li>
                   </ul>
	   </li>
            <li>secci&oacute;n 2</li>
            <li>secci&oacute;n 3</li>
         </ul>
      </li>
      <li><strong onclick="Menu(this)">Apartado 2 </strong>
         <ul>
            <li>seccion 4</li>
            <li>secci&oacute;n 5</li>
         </ul>
      </li>
      <li><strong onclick="Menu(this)">Apartado 3</strong> 
         <ul>
            <li>secci&oacute;n 6</li>
            <li>secci&oacute;n 7</li>
            <li>secci&oacute;n 8</li>
         </ul>
      </li>
   </ul> 

Para que el menú sea accesible sin javascript le agregué a la lista un identificador id="menu" para que sea el propio js el que se encargue de cerrar las opciones. Si no hay javascript todas las opciones del menú quedarán abiertas y visibles.

Para contraer iniciamente los menús agrega este script

Código:

function iniciaMenu(){
	el = document.getElementById('menu')
	st = el.getElementsByTagName('strong')
	for(m=0; m<st.length; m++){
		Menu(st[m])
	}
}
onload = iniciaMenu;

Y el aspecto del menú pues ya te lo trabajas tú al gusto

Código HTML:

<style type="text/css">
<!--
#menu li{
	list-style-type: none;
}
#menu li ul{
	margin-left: 0;
	padding-left: 0;
	
}
#menu li strong{
	cursor: pointer;
}
#menu li ul li{
	margin-left: 15px;
}
-->
</style>

Si no entiendes algo me avisas :arriba::-)

Un saludo :cool: