CSS - Menu CSS se oculta tras un slider

   
Vista:

Menu CSS se oculta tras un slider

Publicado por Pablo Delgado (1 intervención) el 18/12/2013 18:00:11
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
1
2
3
4
5
6
7
8
9
10
11
.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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
* {
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
.slider {
	width:960px;
	height:500px;
	margin:0 auto;
	padding-top:5px;
	}
 
.menu {
	padding-top:5px;
	margin:0 auto;
	width:960px;
	height:45px;
	}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Menu CSS se oculta tras un slider

Publicado por xve (352 intervenciones) el 18/12/2013 22:28:21
Hola Pablo, para ello, puedes utilizar la propiedad z-index, que te sirve para posicionar la profundidad de las capas... por ejemplo, si pones al menú z-index:10; tendría que quedar por encima de cualquier otra capa.

Si nos puedes comentar...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Menu CSS se oculta tras un slider

Publicado por cristian sanchez (1 intervención) el 07/06/2014 18:02:25
Amigo muchas gracias me funciono perfecto... :)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar