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
Codigo menu
Cada elemento está metido dentro de un div, para su colocación y manejo:
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
0
