Comunidad de diseño web y desarrollo en internet online

Menu CSS se oculta tras un slider

Citar            
MensajeEscrito el 18 Dic 2013 05:01 pm
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.

Código 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; }


Código menu css

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;
   }

Por lk2_89

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 18 Dic 2013 06:59 pm
Ya está solucionado.

Por lk2_89

1 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.