Hacer segundo nivel en este menu desplegable con mismo estilo css

[erfrancis]

A nadie se le ocurre nada? Imagino que para alguien que este muy habituado al uso de css no será algo complicado.

#menubalanceo li ul li:hover ul {

padding: 15px 0;
background: #000000;

border-top:1px solid #000000;
border-right:1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
opacity: 1;
visibility: visible;
box-shadow: 1px 1px 7px rgba(0,0,0,.5);

-webkit-animation-name: swingdown;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;

-moz-animation-name: swingdown;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease;

-o-animation-name: swingdown;
-o-animation-duration: 1s;
-o-animation-timing-function: ease;

-ms-animation-name: swingdown;
-ms-animation-duration: 1s;
-ms-animation-timing-function: ease;

animation-name: swingdown;
animation-duration: 1s;
animation-timing-function: ease;
z-index: 999;
}

Con esto consigo hacer vez el bloque de segundo nivel, pero me sale a la misma posición que los de primer nivel, alguien sabe que me puede faltar por añadir? o como modificar la posición?