Tengo un problema con un menu desplegable implementado con css. si alguien pude sacarme esta duda.
El error esta en que tanto el nivel 3 como 4 se muestran superpuestos (no a 153px...)
Les paso el codigo, desde ya gracias por su ayuda.
css=>
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-color: #EFFBFB;
background-repeat: repeat;
width: 100%;
height: 100%;
color: #184B75;
background-image: url("../img/fon.gif");
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#mad {
position: absolute;
margin: 20px 17px 20px 17px;
padding: 0;
left: 0;
right: 0;
top: 0;
width: auto;
height: 95%;
background-color: #EFFBFB;
text-align: center;
z-index: 0;
}
#menu {
position: absolute;
left: 0;
top: 114px;
width: 153px;
height: auto;
padding: 0;
margin: 0;
font-size: 12px;
background-color: #EFFBFB; /* celeste */
text-align: left;
z-index: 99999;
}
#menu p {
text-align: left;
margin: 0;
padding: 0px 2px 6px 6px;
}
#menu p.ley {
text-align: left;
margin: 0;
padding: 0px 2px 0px 6px;
font-size: 9px;
}
#menu ul {
padding: 0;
margin: 0;
list-style-type: none;
font-weight: bold;
}
#menu ul li.nivel1 {
width: 153px;
border: solid 1px #185B92; /* azul */;
border-top: none;
border-collapse:collapse;
}
#menu ul li.primera {
border-top: solid 1px #185B92; azul */
}
#menu ul li a { /* opcion ppal */
display: block;
text-decoration: none;
color: #fff; /* letra blanca */
background-color: #3183A7; /* azulado */
border: solid 1px #185B92; /* azul */;
border-top: none;
padding: 6px;
position: relative;
}
#menu ul li:hover {
position: relative;
background-color: #C2DAE5; /* celeste */
color: #000; /* letra azulado */
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
/* selecciona opcion ppal */
background-color: #C2DAE5; /* celeste */
color: #3183A7; /* letra azulado */
position: relative;
}
#menu ul li a.nivel1 {
display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;}
#menu ul li:hover > ul {
display: block;
position: absolute;
left: 153px;
top:-1px;
}
#menu ul li ul li a {
/* nivel 2 */
width: 153px;
background-color: #3183A7; /* azulado */
color: white;
position: relative;
}
#menu ul li ul li a:hover {
/* cuando se marca nivel 2 */
position: relative;
background-color: #C2DAE5; /* celeste */
color: #3183A7; /* letra azulado */
}
#menu ul li a.nivel1ie {
width: 153px;
padding: 6px;
}
#menu ul li a.subnivel {
padding-bottom: 6px;
}
#menu ul li a:hover ul.nivel2, #menu ul.nivel2 li a:hover ul.nivel3, #menu ul.nivel3 li a:hover ul.nivel4 {
display: block;
position: absolute;
left: 153px;
top:-1px;
}
table.falsa {
border-collapse:collapse;
border:0px;
float: left;
}
#cont {
position: absolute;
margin: 0;
padding: 0;
left: 160px;
right: 1px;
top: 114px;
height: auto;
width: auto;
background-color: #FFFFFF;
border-width: 1px;
border-style: solid;
border-color: #185B92;
z-index: 1;
}
html =>
<html>
<head>
<meta http-equiv="Content-Language" content="es-ar">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link media="screen" href="est.css" type="text/css" rel="stylesheet">
<!--[if IE 6]><style>#menu ul li.nivel1 {margin-bottom:-1px} #menu ul li {width: 153px;}</style><![endif]-->
<!--[if IE 7]><style>#menu ul li.nivel1 {margin-bottom:-3px}</style><![endif]-->
</head>
<body>
<div id="mad">
<div id="menu">
<br class="menubr">
<p>
<ul>
<li class="nivel1 primera"><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 class="nivel2">
<li class="primera"><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>
<li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li class="primera"><a href="#" class="nivel1">Opción 2.1</a>
<!--[if lte IE 6]><a href="#" class="subnivel">Opción 2.1<table class="falsa"><tr><td><![endif]-->
<ul class="nivel3">
<li class="primera"><a href="#" class="nivel1">Opción 2.1.1</a>
<!--[if lte IE 6]><a href="#" class="subnivel">Opción 2.1.1<table class="falsa"><tr><td><![endif]-->
<ul class="nivel4">
<li class="primera"><a href="#">Opción 2.1.1.1</a></li>
<li><a href="#">Opción 2.1.1.2</a></li>
<li><a href="#">Opción 2.1.1.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Opción 2.1.2</a></li>
<li><a href="#">Opción 2.1.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Opción 2.2</a></li>
<li><a href="#">Opción 2.3</a></li>
<li><a href="#">Opción 2.4</a></li>
<li><a href="#">Opción 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li class="primera"><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="#">Opción 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li class="primera"><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="#">Opción 4.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li class="primera"><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opción 5.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</p>
<br>
</div>
<div id="cont">
<br>
</div>
</div>
</body>
</html>
Una duda que me surge y tras leerme el post no lo vi comentado:
Respuesta: Menu desplegable 100% CSS 
Este tema le ha gustado a 54 personas (incluyéndote)