[SOLUCIONADO] submenu se esconde debajo de div inferior... :(

[MindPaniC]

Hola,

Tengo un problema con el submenu. Debajo del menu hay una capa con una opacidad determinada, la cuestion es que al desplegarse el submenu este se esconde detras de esa capa cuando deberia mostrarse por encima, además no me deja hacer click en los enlaces del submenu. Podeis ver lo que ocurre haciendo hover sobre "about us" en:

http://test.javierdelpozo.com

Este es el css del submenu:

Código CSS:

#principal ul ul {
    display:none;
    position:absolute;
    margin-top:17px;
}
#principal ul li:hover ul {
    display:block;
    z-index:auto;
}
#principal ul ul li {
    margin:0;
    font-size:1em;
    font-family:'Droid Sans', sans-serif;
    text-transform:uppercase;
}
#principal ul ul li a {
    width:auto;
    display:block;
    padding:5px;
    background-color:#f18e00;
    color:#FFF; 
}
#principal ul ul li a:hover {
    color:#666;
}
 

Este es el CSS de la capa que se encuentra justo debajo del menu principal:

Código CSS:

#lema {
    width:100%;
    background-color:#FFF;
    opacity:0.7;
    -moz-opacity:0.7;
    filter: alpha(opacity=70);
    -khtml-opacity:0.7;
    color:#f18e00;
    text-align:center;
    text-transform:uppercase;
    font-family:'Droid Sans', sans-serif;
    font-size:2.7em;
    font-weight:bold;
    padding:40px 0 40px;
}
 

¿Como lo puedo solucionar?

[MindPaniC]

Bueno ahora mismo he usado la propiedad z-index en los dos elementos, para el #lema he puesto z-index:1; y para el submenu he puesto z-index:2; y de momento funciona bien

¿existe algún método mejor?

Saludos

[jonni09lo]

Pues para colocar un elemento encima de otro no que yo sepa.

Saludos

[MindPaniC]

Pues muchas gracias!!

Doy el tema por solucionado, para los que no lo sepan se pueden colocar capas una encima de otra usando la propiedad z-index de la siguiente manera: la capa de abajo seria z-index:1; y la que se pone encima seria z-index:2;

Saludos