Submenus que desaparecen en ie

hermess87 · #1 (**permalink**) 22/07/2009, 08:30

Hola camaradas hace dias ya que estoy volviendome loco para hacer un menu desplegable, que solo utilice css (sin javascript). Finalmente estuve mirando unos ejemplos me decidi por uno que funcionaba tanto en Firefox como en Internet Explorer 6.
Grande fue mi sorpresa al ver que si bien se veia bien en ambos "navegadores", no se podia acceder a los submenus desde IE. Es decir, si bien se despliega el div con los enlaces, al intentar llevar el puntero hacia ese area se cierra nuevamente.

Use este ejemplo: documentoweb.com/CSS/Ejemplos/Menu-desplegable-2.html
Cuyo codigo es:
Menu-desplegable-1.css

Código:

* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}

body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu { text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
}
#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: absolute;left: 0px;
}
#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;
}

Menu-desplegable-1.html

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Menu desplegable CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="Menu-desplegable-1.css" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" 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>
<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>
<li><a href="#">Opción 2.1</a></li>
<li><a href="http://www.google.es">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>
<li><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>
<li><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> <li><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>
</div>
</body>
</html>

</body>
</html>

Bueno, si se les ocurre alguna manera de solucionar este pequeno problema me darian una gran ayuda. Suerte y gracias!

kseso? · #2 (**permalink**) 22/07/2009, 08:50

Hola Hermes
El autor de ese menú, Mikmoro, se ha cansado ha repetir la importancia de realizar los cambios uno por uno y antes de hacer el siguiente verificar que todo sigue funcionando perfectamente.

editado y borrado porque no se correspondía con el ejemplo.

Un saludo

alexk · #3 (**permalink**) 22/07/2009, 08:54

pues nose de que hablas... ami me funciona perfecto... fijate en tus estilos... que tus "li" o "li a" no tengan un margin. de separacion... si se despega un pelin del original puede que no funcione... pero es normal ya que el ":hover" cree que se termino el "li"... pero pasa el mouse rapido jeje y veras que si anda... pero bueno es eso un margensito por alli bueno chao y suerte!!!...

hermess87 · #4 (**permalink**) 22/07/2009, 09:20

No, aparentemente no es esto. puede ser que sea porque uso ie7 y no ie6?

kseso? · #5 (**permalink**) 22/07/2009, 09:34

Refresca caché, borra temporales..., porque en ie7 en vi$ta tus códigos me funcionan
Tienes dos veces cerrado:

Cita:

</body>
</html>

</body>
</html>

Y yo tengo un error en mi anterior comentario, inducido porque enlazas un menú y una hoja de estilos diferentes:

Cita:

Menu-desplegable-2.html
Cuyo codigo es:
Menu-desplegable-1.css

Un saludo