Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/12/2013, 10:59
lk2_89
 
Fecha de Ingreso: agosto-2007
Mensajes: 71
Antigüedad: 16 años, 8 meses
Puntos: 1
Menu CSS se oculta tras un slider

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:
Ver original
  1. .coin-slider { overflow: hidden; zoom: 1; position: relative; }
  2. .coin-slider a{ text-decoration: none; outline: none; border: none; }
  3.  
  4. .cs-buttons { font-size: 0px; padding: 10px; float: left; }
  5. .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
  6. .cs-active { background-color: #B8C4CF; color: #FFFFFF; }
  7.  
  8. .cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
  9.  
  10. .cs-prev,
  11. .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

Codigo MENU
Código CSS:
Ver original
  1. * {
  2. font-family:sans-serif;
  3. list-style:none;
  4. text-decoration:none;
  5. margin:0;
  6. padding:0;
  7. text-align:center;
  8. }
  9.  
  10. .nav > li {
  11. width:240px;
  12. float:left;
  13. }
  14.  
  15. .nav li a {
  16. background:#0c9ba0;
  17. color:#FFF;
  18. display:block;
  19. border:1px solid;
  20. padding:10px 12px;
  21. }
  22.  
  23. .nav li .flecha{
  24. font-size: 9px;
  25. padding-left: 6px;
  26. display: none;
  27. }
  28.  
  29. .nav li a:not(:last-child) .flecha {
  30. display: inline;
  31. }
  32.  
  33. .nav li a:hover {
  34. background:#0fbfc6;
  35. }
  36.  
  37. .nav li {
  38. position:relative;
  39. }
  40.  
  41. .nav li ul {
  42. display:none;
  43. position:absolute;
  44. min-width:240px;
  45. }
  46.  
  47. .nav li:hover > ul {
  48. display:block;
  49. }
  50.  
  51. .nav li ul li ul {
  52. right:-140px;
  53. top:0;
  54. }

Cada elemento está metido dentro de un div, para su colocación y manejo:
Código CSS:
Ver original
  1. .slider {
  2.     width:960px;
  3.     height:500px;
  4.     margin:0 auto;
  5.     padding-top:5px;
  6.     }
  7.  
  8. .menu {
  9.     padding-top:5px;
  10.     margin:0 auto;
  11.     width:960px;
  12.     height:45px;
  13.     }