Menu desplegable 100% CSS

[JuJoGuAl]

para los que quieran agregar mas niveles en su menu haber creo que seria asi:

SUPONGAMOS QUE TENEMOS EL NIVEL 1:

Código HTML:

<li class="nivel1"><a href="#" class="nivel1">Opci&oacute;n 1</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
    <ul class="uno">
        <li><a href="#">Opci&oacute;n 1.1</a></li>
        <li><a href="#">Opci&oacute;n 1.2</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
 

para agregarle otro nivel agrego un <ul> nuevo dentro del <li> de opcion 1.1, con una clase para identificar ese nuevo menu... asi:

Código HTML:

<li class="nivel1"><a href="#" class="nivel1">Opci&oacute;n 1</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
    <ul class="uno">
        <li><a href="#">Opci&oacute;n 1.1</a>
            <ul class="unomedio">
                <li><a href="#">Opci&oacute;n 1.1.1</a></li>
                <li><a href="#">Opci&oacute;n 1.1.2</a></li>
            </ul>
        </li>
        <li><a href="#">Opci&oacute;n 1.2</a></li>
    </ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
 

y en el CSS añadí estos cambios:

Código CSS:

#menu ul li ul li ul.unomedio {display: none;
}
#menu ul li ul li a:hover ul.unomedio, #menu ul li ul li:hover ul.unomedio {display: block;
position: absolute;width: 816px;border: solid 1px #fff;border-top: none;background-color: #399;
}
#menu ul li ul li ul.unomedio li a {width: 160px;
padding: 6px 0px 8px 0px;
border: none;
background-color: #399;
}
#menu ul li ul li ul.unomedio li. a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
}
ul.unomedio {left: -1px;top: 28px;}
 

yo lo probe en Chrome y funcionó pero de no ser asi avisen,e y ayudare en lo que sepa, si eso tiene algun error por favor notificarmelo no soy muy diestro con las CSS