menu tipo acordeon

[malcubas1]

si alguien me puede ayudar nesecito hacer tipo acodeon el siguiente menu

gracias

Código HTML:

<div id="divmenu">
<ul class="top-level">
<li id="1" name="1">
<a href="#">Gestion Academica papa</a>
<ul class="sub-level">
<li id="2" name="2">
<a href="#">Proceso de Matricula hijo</a>
<ul class="sub-level">
<li id="7" name="7">
<a href="#">Carga Academica nieto</a>
</li>
<li id="8" name="8">
<a href="#">Cursos Matriculados nieto</a>
</li>
<li id="10" name="10">
<a href="#">Reportes nieto</a>
</li>
</ul>
</li>
<li id="3" name="3">
<a href="#">Proceso de Notas hijo</a>
<ul class="sub-level">
<li id="9" name="9">
<a href="#">Registro de Notas nieto</a>
</li>
</ul>
</li>
<li id="4" name="4">
<a href="#">R nieto</a>
</li>
</ul>
</li>
<li id="5" name="5">
<a href="#">Gestion Administrativa papa</a>
<ul class="sub-level">
<li id="6" name="6">
<a href="#">ventas nieto</a>
</li>
</ul>
</li>
</ul>
</div> 

Código CSS:

#divmenu { font-size:0.75em; width:200px; }
#divmenu ul { margin:0px; padding:0px; }
#divmenu li { list-style: none; } 
 
ul.top-level { background:#666; }
ul.top-level li {
 border-bottom: #fff solid;
 border-top: #fff solid;
 border-width: 1px;
}
 
#divmenu a {
 color: #fff;
 cursor: pointer;
 display:block;
 height:25px;
 line-height: 25px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
}
 
#divmenu a:hover{
 text-decoration:underline;
}
 
#divmenu li:hover {
 background: #f90;
 position: relative;
}
ul.sub-level {
    display: none;
}
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
}
ul.sub-level {
    display: none;
}
 
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
}
 
ul.sub-level li {
    border: none;
    float:left;
    width:150px;
}
 
/*Seconda Level*/
#divmenu .sub-level {
    background: #999;
}
 
/*Third Level*/
#divmenu .sub-level .sub-level {
    background: #09C;
}
/*RESET STYLES*/
li:hover .sub-level .sub-level {
    display:none;
}
 
.sub-level li:hover .sub-level {
    display:block;
}
 

[ArturoGallegos]

Ok, necesitas hacerlo tipo acordeón y tu problema es?

Digo no somos adivinos y si tu no te molestas en explicarnos el problema que tienes, dudo que alguien se tome la molestia en revisar tu código en busca de un juego de adivinanzas.

[tofol]

Hola, supongo que te pasa igual que a mi, que no te manejas muy bien en desarrollo web. Yo lo he solucionado muy fácil. Hay una aplicación llamada JqueryUI que te facilita mucho la vida. La web es http://jqueryui.com/ Te diriges a "CUSTOM DOWNLOAD" y elige sólo acordeion sin tema alguno lo descargas, lo descomprimes y en Demos mira los distintos html que tienes de demos para que sepas cómo hacerlo en tu proyecto, Es muy sencillo.