menu multinivel acordeon solo con css

Hola a todos,

Bueno ando con algo que no me resulta. Mi objetivo es crear un menú en forma de acordeón vertical pero multinivel pero solo utilizando css, el problema es que el último nivel no se despliega, así que por favor si alguien me quiere hechar una mano le dejo el código que tengo:

Código CSS :

.accordion li, .submenu li, .sub-menu2 li {list-style: none;}

/*SHOW AND HIDE SUBMENU*/
.accordion li > .sub-menu { height: 0;  overflow:hidden; }
 
.accordion li:target > .sub-menu { height: 32px;}

/*SHOW AND HIDE SUBMENU2*/
.sub-menu li > .sub-menu2 { height: 0;  overflow:hidden; }
 
.sub-menu li:target > .sub-menu2 {  height: 32px;}

Código HTML :

<ul class="accordion">
    <li id="one"><a href="#one">My Files</a>
      <ul class="sub-menu">
   
          <li id="ab"><a href="#ab">Dropbox</a>
            <ul class="sub-menu2">    
              <li><a href="#">Dropbox</a></li>   
           </ul> 
          </li>
   
      </ul>  
    </li>
    <li id="two"><a href="#two">Mail</a></li>
</ul>

Al dar click al link de '#ab', pierde el foco el de '#one' por lo tanto regresa a su posición, abre el de 'ab' pero al estar dentro de 'one' no se ve.

A usar JS. O hacerlo con :hover, que seguro no es lo que quieres...