Menus tipo acordeon con css

Hola quetal tengo una duda en como hacer un menu de tipo acordeon con hojas de estilo y que cuando le pase el mouse encima cambie de color toda la celda y si lo presiono aparezca el submenu para esa opcion......... algo asi:

menu1
menu2
menu3

Si le pico al menu2 quede asi:

menu1
menu2
submenu1
submenu2
menu3

Algo asi como expandir y contraer el menu en general, eh leido algo y se que se puede hacer con listas pero aun me quedan muchas dudas agradecera toda su ayuda y si tiene algun tutorial mucho que mejor

De antemano gracias

Hola elessar
aqui te prepare algo... bueno no trabaja con IE ... pero para todo problema hay una solución... (Solo lo probé en Firefox...)

Código :

<style type="text/css">
#menuBox{
width:200px;
height:100%;
border:1px solid #999;
border-bottom:0;
background:#CCCCCC;
}
#menuBox ul{
list-style:none;
margin:0px;
padding:0px;
}
#menuBox ul li{
border-bottom:1px solid #999; 
}
#menuBox ul li a{
text-decoration:none;
color:#000;
display:block;
padding:10px;
}
#menuBox ul li ul{
display:none;
}
#menuBox ul li:hover ul{
background:#FFF;
display:block;
}
</style>

-------

<div id="menuBox">
<ul>
  <li><a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Submenu 1-1 </a></li>
      <li><a href="#">Submenu 1-2 </a></li>
      <li><a href="#">Submenu 1-3 </a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Submenu 2-1</a></li>
      <li><a href="#">Submenu 2-2</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 3</a>
    <ul>
      <li><a href="#">Submenu 3-1</a></li>
    </ul>
  </li>
</ul>
</div>

Creo que por la red encontre un script que arreglaba este problema con el IE... si lo encuentro lo posteo...

Salu2

Hey Erick, pero si usas el :hover en el a, si funcionará.

Tendra esto algo que ver con el concurso del header de CL?

Whahahahahahaha...
pero por suerte mi tradicion no me permite concursar en este muy buen concurso

¿Tradición? O_o

Recuerden que Erik© trabaja secretamente para M$

Shuuuuuu!

Eso que nadie se ha dado cuenta mi potencial uso de los CSS solo para IE ...

. . .

Oh por Dios...

Erik© escribió:

Viva la familia.
Supongo aplica el concepto para un menu horizontal...

Podeis poner las lineas de codigo de la hoja de estilo, '0ara que funcione en IE.
Gracias.