CSS ->Menú vertical y Caja de texto con "Hover"

[MarcosCaz]

mi duda es la siguiente, quiero optimizar el espacio de mi pagina, es por eso que necesito poner un menu vertical dentro de una box... el problema es que necesito que se despliegue vertical y no logro hacer que al desplegarse el submenú, las opciones del menú bajo este bajen con el submenú

me explico
menu1
menu1.1
menu1.2
menu2
menu3

en vez de eso, menu 2 y 3 se quedan estaticos y menu 1.1 y 1.2 quedan sobre ellos...(ademas que se pueda abrir 1 solo sub menú a la vez, ej, si abro el submenu 2, que el submenú 1 se cierre)
sobre lo mismo, queria hacer que al pasar el mause sobre las opciones del menu, solo cambiara de color, y al hacerles click se desplegara el menú, pero al pasar el mause, se despliega altiro...

otra duda, es aprovechando esto mismo

quería poner una caja de texto que se desplegara con las mismas opciones del menú anterior... obvio que se lograría solucionando el primer problema... aquí mi intento de codigo

http://codepen.io/anon/pen/Fwhqy

si me pueden orientar, muchísimas gracias, entiendo un poco css y html, pero no me sé todas las config :c

[DesgraciadoGabo]

pos tiene una estructura extraña tu menú pero nomas modifiqué tu css

Código CSS:

.menu ul{
    position:absolute;
    left:0px;
    top:36px;
    margin:0px;
    list-style:none;
    padding:0px;
    opacity:0;
    transition:opacity .35s ease .2s;
    -webkit-transition:opacity .35s ease .2s;
    -moz-transition:opacity .35s ease .2s;
    -o-transition:opacity .35s ease .2s;
    visibility:hidden;  
  z-index:10;
}
 

y si te das cuenta nada mas le agregue el z-index:10; [http://www.w3schools.com/cssref/pr_pos_z-index.asp] y ya queda, pruebalo y si fallamos vemos que más hacer, saludos!!!