Buen dia.

Tengo un par de dudas respecto al CSS....

Me he bajado un Free CSS Template de internet para utilizarlo en mi plataforma web desarrollada en PHP, el problema es que una vez que termine de acondicionar el template y casi todo quedo bien, en la parte superior derecha el Template por defecto muestra una capa con la fecha actual, a esa capa solo le elimine la opcion de mostrar la fecha actual y puse un recuadro con menu desplegable (al hacer a:hover) y pues aparecen las opciones de la cuenta del usuario del sistema y demas cosas para el usuario registrado.

El primer problema es que, el menu de la parte superior derecha (el menu desplegable que ya mencione), queda detras de una capa que esta mas abajo, vaya, no alcanzo a ver TODAS las opciones del Menu, porque la capa que esta mas abajo se sobre pone encima.

Mi segunda duda es, como pueso hacer para que una capa se sobre ponga por encima de todas ?, es que quiero hacer el efecto con CSS y javascript de que cuando se pulse sobre una IMAGEN se abra una capa que este por encima de todas (capa en color negro, transparente).

Saludos !

Como puedo saber cual valor ponerle ?, ya que en el CSS existen como 2 o 3 capas que ya viene con un valor de z-index a: 999, 998 y 1. Y pues ya intente poniendo: z-index:1 (y valores hasta 100) y siempre esta por detras el menu desplegable ...

Asi carga el menu desplegable... OJO con la clase, se llama date porque se supone que en esa parte mostraba le fecha actual, y pues yo prefiero mostrar un menú desplegable:

<style>
.date {position:absolute; top:0; right:0; margin:0; width:150px;height:150px;}
.date ul {padding: 0;margin: 0;list-style: none;text-align:center;float:right;padding-right:3px;}
.date li {float: left;position: relative;width:110px;border:solid 1px #a8cdff;background-color:#e2eeff;
            font-size:11px;padding:2px;}
.date li ul {display: none;position: absolute;top: 1em;left: 0;}
.date li:hover ul {display: block;}
.date .list-in {text-align:left;margin-top:8px;margin-left:0px;}
.date .list-in li {border:solid 0px #a8cdff;border-left-width:1px;border-bottom-width:1px;
            border-right-width:1px;margin-left:0px;}
</style>

<?php
    echo '<div class="date">
      <ul>
      	<li>Mi Perfil
      		<ul class="list-in">
      			<li><a href="#">Mis Campa&ntilde;as</a></li>
      			<li><a href="#">Mi Informaci'. acento("o"). 'n</a></li>
      			<li><a href="#">Configuraci'. acento("o"). 'n</a></li>
      			<li><a href="#">Salir</li>
      		</ul>
      	</li>
      </ul>
    </div>';
?>

Y la capa que se pone encima de mi menu desplegable es una capa que forma una barra larga donde posiciona un INPUT para el proceso de busqueda dentro del sitio, el style es el siguiente:

#search-tabs {position:relative; bottom:-1px; padding-left:260px;}
#search-tabs ul {margin:0; padding:0; list-style:none;}
#search-tabs ul li {display:inline; margin:0; padding:0;}
#search-tabs ul li a {float:left; margin:0; padding:0 0 0 15px; text-align:center; cursor:pointer; font-size:120%;}
#search-tabs ul li a span {float:left; display:block; padding:0 15px 0 0; line-height:35px;
                        vertical-align:middle; text-decoration:underline;}
#search-tabs ul li a.active {background:#F0F6FF url("../design/search-active.gif") 0 0 no-repeat;
                         text-decoration:none; color:#2F2F2F; font-weight:bold;}
#search-tabs ul li a.active span {background:#F0F6FF url("../design/search-active-02.gif") 100% 0 no-repeat;
                         text-decoration:none;}
#search-top {width:900px; height:6px; background:#DCEBFF url("../design/search-top.gif") 0 100% no-repeat; font-size:0;}
#search {background:#DCEBFF url("../design/search.gif") 0 0 repeat-y; overflow:hidden;}
#search-in {padding:0px 0px 0px 0px; background:url("../design/search-in.gif") 0 0 no-repeat; font-size:12px;}
#search-in a {text-decoration:none;color:black;}
#search-in a:hover {text-decoration:underline;color:black;}
#search-bottom {width:900px; height:6px; background:#DCEBFF url("../design/search-bottom.gif") 0 0 no-repeat; font-size:0;}
#search-input01, #search-input02, #search-input03, #search-input04, #search-input05 {width:500px; padding:3px;
                        border:1px solid #66A6FF;}
.search-submit {position:relative;bottom:-7px;font-size:12px;}

Ponele un valor altísimo a la propiedad z-index de esa capa. 100000 por ejemplo

Les dejo el code completo:

Como acostumbro a programar con includes para tener un codigo mas desglozado y facil acceso al momento de estar arreglando detalles extras...

main.css

#main {width:900px; margin:0 auto; text-align:left;}
#header {position:relative; overflow:hidden; margin-bottom:-20px;border:solid 1px red;}
#logo {margin:0; border:0;}
#page {clear:both; margin:15px 0;}
.date {position:absolute; top:0; right:0; margin:0; width:150px;height:150px;}

Codigo HTML/PHP: http://pastebin.com/0Sg6i36E.

---

----- EDITADO -----

Ya logre se mostrara el menu desplegable, y no era cuestion del z-index, sino del estilo #header, la propiedad de overflow, estaba inicializada en hidden y la cambie a visible.

Pero Aun tengo problemas, ya que no entiendo porque razon el menu desplegable se esconde cuando intento acceder a alguno de los elementos del menu :S.

Ahora les proporciono informacion de las capas que se involcrab por envima y por abajo de la capa donde esta el menu desplegable.

1- Se abre la capa #header que contiene la capa #logo y la clase .date dentro.

#header {position:relative; overflow:visible; margin-bottom:-20px;border:solid 1px red;}
#logo {margin:0; border:0;}
.date {position:absolute; top:0; right:0; margin:0; width:150px;height:150px;}

2- Continua la capa #search-tabs que es donde aparece una barra para busqueda, abarca todo el ANCHO del sitio.

#search-tabs {position:relative; bottom:-1px; padding-left:260px;border:solid 1px orange;}
#search-tabs ul {margin:0; padding:0; list-style:none;}
#search-tabs ul li {display:inline; margin:0; padding:0;}
#search-tabs ul li a {float:left; margin:0; padding:0 0 0 15px; text-align:center; cursor:pointer; font-size:120%;}
#search-tabs ul li a span {float:left; display:block; padding:0 15px 0 0; line-height:35px; vertical-align:middle; text-decoration:underline;}
#search-tabs ul li a.active {background:#F0F6FF url("../design/search-active.gif") 0 0 no-repeat; text-decoration:none; color:#2F2F2F; font-weight:bold;}
#search-tabs ul li a.active span {background:#F0F6FF url("../design/search-active-02.gif") 100% 0 no-repeat; text-decoration:none;}

Dejo una IMAGEN/SCREENSHOT para que visualizen el menu desplegable del lado superior derecho.

Saludos !