Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/05/2012, 13:33
bbrian
 
Fecha de Ingreso: enero-2010
Mensajes: 400
Antigüedad: 14 años, 3 meses
Puntos: 6
No se ve el menu desplegable

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:
Ver original
  1. #navbar {
  2.     margin:0;
  3.     margin-top:0px;
  4.     padding:0px 10px;
  5.     text-transform:uppercase;
  6.     background:#02060F;
  7.     border-top:1px dotted #ccc;
  8.     border-bottom:1px dotted #ccc;
  9.     }
  10.  
  11. #page-bar {
  12.     width:722px;
  13.     }
  14.  
  15. #page-bar ul {
  16.     list-style: none;
  17.     }
  18.  
  19. #page-bar li {
  20.     float:left;
  21.     list-style:none;
  22.     cursor: pointer;
  23.     display:block;
  24.     border-right:0px solid #02060F;
  25.     }
  26.  
  27. #page-bar li:hover {
  28.     background: #02060F;
  29.     }
  30.  
  31.  
  32. #page-bar a, #page-bar a:visited {
  33.     margin: 0px;
  34.     padding:10px 16px;
  35.     font-weight:bold;
  36.     color:#FFF;
  37.     display:block;
  38.     }
  39.  
  40. #page-bar a:hover {
  41.     text-decoration:none;
  42.     display:block;
  43.     }
  44.  
  45. #searchform {
  46.     width:194px;
  47.     float:right;
  48.     text-align:right;
  49.     padding-top:8px;
  50.     margin-right:10px;
  51.     }
  52.  
  53. /* Dropdown Menus */       
  54. #page-bar li {
  55.     float: left;
  56.     margin: 0px;
  57.     padding: 0px;
  58.     }
  59.    
  60. #page-bar li li {
  61.     float: left;
  62.     margin: 0px;
  63.     padding: 0px;
  64.     width: 122px;
  65.     text-transform:none;
  66.     }
  67.    
  68. #page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
  69.     background: #050C1C;
  70.     width: 122px;
  71.     float: none;
  72.     margin: 0px;
  73.     padding: 5px 10px 5px 18px;
  74.     border-top: 1px solid #050C1C;
  75.     }
  76.    
  77. #page-bar li li a:hover, #page-bar li li a:active {
  78.     background: #000033;
  79.     padding: 5px 10px 5px 18px;
  80.     }
  81.  
  82. #page-bar li ul {
  83.     position: absolute;
  84.     width: 10em;
  85.     left: -999em;
  86.     }
  87.  
  88. #page-bar li:hover ul {
  89.     left: auto;
  90.     display: block;
  91.     }
  92.    
  93. #page-bar li:hover ul, #page-bar li.sfhover ul {
  94.     left: auto;
  95.     }

Imagen:
Código CSS:
Ver original
  1. *{
  2.         /* Pequeño reset - ignorar - */
  3.         margin: 0;
  4.         padding: 0;
  5.     }
  6.    
  7.     .contenedor-imagen,
  8.     .contenedor-imagen img{
  9.         /* Tanto al contenedor como a la imagen
  10.         le damos posición relative */
  11.         position: relative;
  12.         /* El z-index es para ubicar la imagen debajo del texto */
  13.         z-index: 10;
  14.         /* Las dimensiones son necesarias, para que nada salga de lugar */
  15.         width: 659px;
  16.         height: 380px;
  17.     }
  18.     .epigrafe{
  19.         /* posicionamiento del epigrafe */
  20.         position: absolute;
  21.         left: 0;
  22.         right: 0;
  23.         bottom: 0;
  24.         z-index: 20;
  25.        
  26.         background: #000; /* fallback, para navegadores viejos */
  27.         background: rgba(0,0,0,0.6); /* negro con 50% de transparencia */
  28.        
  29.         /* Estilos adicionales, para que quede bonito */
  30.         font-family: Helvetica, sans-serif;
  31.         color: #FFF;
  32.         padding: 10px;
  33.     }
  34.  
  35.     .epigrafe p{
  36.         font-size: 14px;
  37.     }

Que debo cambiar? Saludos