Ver Mensaje Individual
  #3 (permalink)  
Antiguo 18/12/2010, 03:02
ploki
 
Fecha de Ingreso: mayo-2009
Mensajes: 18
Antigüedad: 14 años, 11 meses
Puntos: 0
Respuesta: Problema menú desplegable css

Muchas gracias por la respuesta!
Ibas bien encaminado. El problema es que en un sitio tenía position:absolute y se quedaba abajo.
Ya he solucionado esto tuve que tocar el overflow para que fuera visible, el tema es que ahora no consigo que la capa de abajo se quede parada, es decir, cuando el menú desplegable superior se abre se mueve el contenido de la capa cuerpo.
Te dejo el código y un enlace para poder ver el html
Gracias de antemano

Código:
<head>
<style type="text/css">

body {
    color: purple;
    background-color: #d8da3d }


#menu {  text-align: center;
font-size: 0.7em;


z-index:3;
}
#menu ul 
{ list-style-type: none;}
#menu ul li.nivel1 
{ float: left;
width: 162px;
margin-right: 2px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: relative;left: 0px;
z-index:3;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
</style>

</head>
<body>
<div id='cabecera' style='z-index:0;position:relative;background-color:red;overflow:visible'>
  <div style='z-index:1;position:relative;background-color:blue;height:100px;'>Cabecera
     <div id="menu" style='position:relative;z-index: 3'>
	<ul>
	  <li class="nivel1"><a href="#" class="nivel1">Opción 1</a>
	<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
		<ul>
			<li><a href="#">Opción 1.1</a></li>
			<li><a href="#">Opción 1.2</a></li>
		</ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
	</ul>
  
      </div>
   </div>
</div>
<br/>
<div id='cuerpo' style='z-index:0;position:relative;background-color:red'>Cuerpo</div>
</body>

http://htmledit.squarefree.com/ ->La pagina donde comprobarlo.
Estoy usando FF.

Gracias