No se ve el menu desplegable

[bbrian]

Hola gente... Estoy con un problema, tal ves sea una pavada pero no encuentro la solucion. Lo que pasa es lo siguiente:
Cambie de posicion la imagen de portada de mi web es decir el headline y quedo bien abajo del menu, la cosa es que el menu se despliega pero queda detras de la imagen, que puedo hacer para que cuando quiera abrir el menu aparezca sobre la imagen? Les paso como tengo los codigos armados:

Menu:

Código CSS:

#navbar {
    margin:0;
    margin-top:0px;
    padding:0px 10px;
    text-transform:uppercase;
    background:#02060F;
    border-top:1px dotted #ccc;
    border-bottom:1px dotted #ccc;
    }
 
#page-bar {
    width:722px;
    }
 
#page-bar ul {
    list-style: none;
    }
 
#page-bar li {
    float:left;
    list-style:none;
    cursor: pointer;
    display:block;
    border-right:0px solid #02060F;
    }
 
#page-bar li:hover {
    background: #02060F;
    }
 
 
#page-bar a, #page-bar a:visited {
    margin: 0px;
    padding:10px 16px;
    font-weight:bold;
    color:#FFF;
    display:block;
    }
 
#page-bar a:hover {
    text-decoration:none;
    display:block;
    }
 
#searchform {
    width:194px;
    float:right;
    text-align:right;
    padding-top:8px;
    margin-right:10px;
    }
 
/* Dropdown Menus */        
#page-bar li {
    float: left;
    margin: 0px;
    padding: 0px;
    }
    
#page-bar li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 122px;
    text-transform:none;
    }
    
#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
    background: #050C1C;
    width: 122px;
    float: none;
    margin: 0px;
    padding: 5px 10px 5px 18px;
    border-top: 1px solid #050C1C;
    }
    
#page-bar li li a:hover, #page-bar li li a:active {
    background: #000033;
    padding: 5px 10px 5px 18px;
    }
 
#page-bar li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    }
 
#page-bar li:hover ul {
    left: auto;
    display: block;
    }
    
#page-bar li:hover ul, #page-bar li.sfhover ul {
    left: auto;
    }
 

Imagen:

Código CSS:

*{
        /* Pequeño reset - ignorar - */
        margin: 0;
        padding: 0;
    }
    
    .contenedor-imagen,
    .contenedor-imagen img{
        /* Tanto al contenedor como a la imagen
        le damos posición relative */
        position: relative;
        /* El z-index es para ubicar la imagen debajo del texto */
        z-index: 10;
        /* Las dimensiones son necesarias, para que nada salga de lugar */
        width: 659px;
        height: 380px;
    }
    .epigrafe{
        /* posicionamiento del epigrafe */
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        
        background: #000; /* fallback, para navegadores viejos */
        background: rgba(0,0,0,0.6); /* negro con 50% de transparencia */
        
        /* Estilos adicionales, para que quede bonito */
        font-family: Helvetica, sans-serif;
        color: #FFF;
        padding: 10px;
    }
 
    .epigrafe p{
        font-size: 14px;
    }
 

Que debo cambiar? Saludos

[rokugatsu]

Es que la línea "#navbar {" no tiene z-index, si te fijas bien en esta parte del código (en la línea 6) tiene z-index: 10;...

Código CSS:

.contenedor-imagen img{
        /* Tanto al contenedor como a la imagen
        le damos posición relative */
        position: relative;
        /* El z-index es para ubicar la imagen debajo del texto */
        z-index: 10;
        /* Las dimensiones son necesarias, para que nada salga de lugar */
        width: 659px;
        height: 380px;
    }
 

Y el .epigrafe tiene z-index: 20;


En tu primer código de la nav no veo que ninguno tenga el z-index mayor a estos, si no tiene z-index mayor a estos, seguirá saliendo por debajo de la imagen que dices...

Ahora, lo que tendrás que hacer es...

Prueba agregando

Código:

z-index: 999;

dentro de

Código:

#navbar {

o a este

Código:

#page-bar li {

El z-index que debes agregar debe ser mayor a los que están puestos en tu otro código :D

[bbrian]

Gracias rokugatsu se lo agregue a #page-bar ul { y funciono.
Saludos

[rokugatsu]

Genial! Aquí estamos cualquier cosa ;)