Consulta Menú Desplegable CSS

Hola, tengo una página muy vieja que tiene un menu desplegable que funciona unicamente en IE.
Lo rearmé y ahora me funciona para todos los exploradores SALVO para IE...

Ya no tengo idea de qué mas tocarle, les dejo los links a ver qué se les ocurre...

MENU: http://www.productoslipo.com/esp/menu_esp.asp
CSS: http://www.productoslipo.com/esp/menu.css

Gracias!

Hola Federico,

Vi que estas usando li:hover para mostrar el submenu, eso esta bien pero no funciona en IE6, en IE7, IE8 e IE9 deberia funcionar.

Para IE6, la unica opción es usar Javascript e imagino que por eso intentaste usar jQuery, lo cual está bien y el código que pusiste está bien, debería funcionar, excepto claro que el archivo se llama jquery.js y no jquerry.js, dime si con eso se arregla.

Saludos.

NEO_JP escribió:

sólo por el placer de llevar la contraria a un BOFH (en esa parte, no en el resto):
Menú tres niveles sólo con css válido para ie6 también.

Saludos

Despues de ver ese codigo, vuelvo a decir que la unica manera eficiente de lograrlo, es usando Javascript.

PD: Que horrendo, miles de condicionales de IE y tablas... TABLAS!!!

NEO_JP escribió:

Eficiencia: Capacidad de disponer de alguien o de algo para conseguir un efecto determinado (del D.R.A.E.)
Creo que esos menús son al menos tan eficientes (si no más) que cualquier otro basado en js o cualquier otro método, con la ventaja de que su funcionamiento no depende de si está o no habilitado el js, si el mismo es 100% compatible con ie6, minimizando las peticiones al servidor y el peso (por más ligeros que sean los scrpts).

No sé qué será más horrendo si:

Código :

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 class="nivel2">
      <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]-->

o

Pósiblemente sólo sea una cuestión de opiniones y gustos

Saludos

Desde mi punto de vista, es mas facil eficiente usar Javascript porque ayuda a "mejorar" la usabilidad de la web y la facilidad de leer, actualizar y extender el siguiente código es mayor a el código que tú muestras.

Repetir condicionales por cada <li> que existe en la navegación es inhumano, además, si tienes 100 estas creando 100 elementos extras, cuando quieras editar algo, tendrias que hacerlo en esos 100 elementos. Y por último, está "mal" insertar elementos del tipo "bloque" dentro de elementos "en linea", es decir, poner un <li> dentro de un <a>.

Por ultimo, estas cambiando la estructura del HTML dependiendo del navegador, lo cual, no necesariamente es malo, pero alguien que no este familiarizado con esto, tendra mucho trabajo que hacer cuando quiera editar el css. Ya que #nav a, no sera lo mismo a #nav a li a.

El siguiente código es el mas eficiente que he podido ver para crear una navegación con JS.

Código :

$('#nav li').live('mouseover mouseout', function(e) {
   if (e.type == 'mouseover') {
      $(this).addClass('hover');
   } else {
      $(this).removeClass('hover');
   }
});

PD: Y no, todo el código que copiaste de la otra web no es eficiente, y es tan intrusivo como el codigo que muestras.