[SOLUCIONADO] Menu CSS se oculta tras un slider

[lk2_89]

Buenas tardes amigos. Tengo un problema con una web que estoy creando en html y css y quería saber si podéis ayudarme. Os cuento...

Estoy haciendo la web manualmente, aunque he tenido que echar mano de códigos ya escritos para insertar un sencillo slider y un menú desplegable en CSS. Pero cuando despliego el menú CSS (el cual está entre el banner y el slider) los elementos del submenu se esconden detrás del slider. Imagino que será cuestión de que las propiedades de ambos se están pisando, por lo que os pongo por aquí los códigos por si un alma cándida me ayuda.

Codigo SLIDER

Código CSS:

.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
 
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
 
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
 
.cs-prev, 
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
 

Codigo MENU

Código CSS:

* {
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
text-align:center;
}
 
.nav > li {
width:240px;
float:left;
}
 
.nav li a {
background:#0c9ba0;
color:#FFF;
display:block;
border:1px solid;
padding:10px 12px;
}
 
.nav li .flecha{
font-size: 9px;
padding-left: 6px;
display: none;
}
 
.nav li a:not(:last-child) .flecha {
display: inline;
}
 
.nav li a:hover {
background:#0fbfc6;
}
 
.nav li {
position:relative;
}
 
.nav li ul {
display:none;
position:absolute;
min-width:240px;
}
 
.nav li:hover > ul {
display:block;
}
 
.nav li ul li ul {
right:-140px;
top:0;
}
 

Cada elemento está metido dentro de un div, para su colocación y manejo:

Código CSS:

.slider {
    width:960px;
    height:500px;
    margin:0 auto;
    padding-top:5px;
    }
 
.menu {
    padding-top:5px;
    margin:0 auto;
    width:960px;
    height:45px;
    }
 

[pzin]

Supongo que lo podrás solucionar con algo como:

Código CSS:

.nav {
  position: relative;
  z-index: 999;
}
 

[lk2_89]

Muchas gracias pzin, ya sale perfectamente!!

Millones de gracias

[lk2_89]

Vuelvo a tener problemas con el código que puse un poco más arriba. Ahora, al intentar añadir nuevas capas a la web, quedan siempre pegadas al slider; no funciona ni padding-top ni margin-top para separarlo, sea el valor que sea.

[pzin]

Si no muestras código poco podemos saber. Normalmente hace falta también el HTML (sin PHP ni nada por el estilo) aparte del CSS.

[lk2_89]

Este es el código HTML que tengo en mi página:

Código HTML:

<div class="contenedor_bnr_mn">
        <div class="banner">
        <img src="imagenes/banner/banner.png" />
        </div>
        
        <div class="slider">
            <div id='coin-slider'>
                <img src="imagenes/slider/1.jpg" />
                <img src="imagenes/slider/2.jpg" />
                <img src="imagenes/slider/3.jpg" />
                <img src="imagenes/slider/4.jpg" />
                <img src="imagenes/slider/5.jpg" />
                <img src="imagenes/slider/12.jpg" />
 
            </div>
                <script type="text/javascript">
                $(document).ready(function() {
                $('#coin-slider').coinslider({ width: 960, height: 500, links : false, effect: '', opacity: 0.0, navigation: false, delay: 5000, sDelay: 30 });
                });
                </script>
        </div>
        <div class="menu">
                                                        <ul class="nav">
                                                <li>
                                                    <a href="#">Inicio<span class="flecha">▼</span></a>
                                                </li>
                                                <li>
                                                    <a href="#">Relojes<span class="flecha">▼</span></a>
                                                    <ul>
                                                        <li><a href="#">Colecciones<span class="flecha">▼</span></a></li>
                                                        <li><a href="#">Colores<span class="flecha">▼</span></a></li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="#">Tiendas<span class="flecha">▼</span></a>
                                                    <ul>
                                                        <li><a href="#">Sevilla capital<span class="flecha">▼</span></a></li>
                                                        <li><a href="#">Sevilla provincia<span class="flecha">▼</span></a></li>
                                                        <li><a href="#">Andalucía<span class="flecha">▼</span></a></li>
                                                    </ul>
                                                </li>
                                                <li>
                                                    <a href="#">Contacto<span class="flecha">▼</span></a>
                                                </li>
                                            </ul>
        </div>
</div>
 

El problema viene a que si dejo como esta ahora, con slider arriba y menu abajo, las siguientes capas que meta en otro div distinto se visualizan perfectamente; pero si quiero dejar el menu arriba con el slider abajo, todas los div que meta a continuación se quedan "pegados" al slider...

No se si se entiende; en caso de que no, envío una imagen

[alzacon]

Debajo de cual div?

Código HTML:

<div class="contenedor_bnr_mn">
 

¿Debajo del cierre de éste o despues del último que hay dentro del mismo?

Por otro lado tienes un error en el primer css que pusiste, el "coin-slider", tienes una clase pero en html lo tienes indicado como id.

[lk2_89]

Iniciado por alzacon

Debajo de cual div?

Código HTML:

<div class="contenedor_bnr_mn">
 

¿Debajo del cierre de éste o despues del último que hay dentro del mismo?

Por otro lado tienes un error en el primer css que pusiste, el "coin-slider", tienes una clase pero en html lo tienes indicado como id.

Detrás del "contenedor_bnr_mn" iría ahora otro div, externo; es decir, después del cierre del contenedor_bnr_mn.

El coin-slider está sacado de una web, así que lo corrijo sobre la marcha!!

EDITO: si lo indico en el html como class, se rompe el slider :/

[alzacon]

Iniciado por alzacon

Debajo de cual div?
Por otro lado tienes un error en el primer css que pusiste, el "coin-slider", tienes una clase pero en html lo tienes indicado como id.

El error es en el CSS. Normal que no funcione así el slider ya que esta buscando el elemento con ese id.

Código Javascript:

$('#coin-slider')
 

[lk2_89]

No, si el slider funciona si no cambio nada; es decir, la transición de imágenes la hace perfectamente. El problema es que si pongo primero el menú y después el slider, cualquier div que ponga después, se queda pegado al slider y no hay manera de separarlo. Mira, he subido ambos ejemplos al dominio:

1º - Primero slider, después menú. El div siguiente se separa, hace padding, margin, etc (enlace).

2º - Primero menú, después slider. El div siguiente se queda pegado, sin posibilidad de separarlo (enlace).

A mi me interesa hacerlo de la segunda forma, que el menú quede arriba y el slider debajo.

[alzacon]

Si que se puede separar. La diferencia está en el menú que deja un pequeño espacio en blanco por debajo. Entre el texto del enlace, sus padding verticales y el borde no ocupan el alto del menu.

texto ->16px (el que tengo en mi navegador por defecto)
16 + 2*10 +2 *1 < 45
38 < 45

Se separa muy facil cambiando el margin de .carrusel, por ejemplo así

Código CSS:

margin: 5px auto 0;
 

[lk2_89]

Iniciado por alzacon

Si que se puede separar. La diferencia está en el menú que deja un pequeño espacio en blanco por debajo. Entre el texto del enlace, sus padding verticales y el borde no ocupan el alto del menu.


Se separa muy facil cambiando el margin de .carrusel, por ejemplo así

Código CSS:

margin: 5px auto 0;
 

¡¡Qué crack!! Muchísimas gracias!!