Problema con menu desplegable vertical

[yconoclasta]

Tengo un problema con una adaptación al menu vertical suckerfish
http://platea.cnice.mecd.es/~jmas/ma...ntalescss.html

En el maligno (IE.x) se ve bien !! (increíble) pero a la hora de verlo en firefox, nada ! En Opera tampoco funciona.

http://idiweb.com.mx/sedil/

Doy las ligas del la CSS y el JS para los interesados
http://idiweb.com.mx/sedil/css/general.css
http://idiweb.com.mx/sedil/scripts/suckerfish.js

Y pego el código para facilitar.

Código:

if (window.attachEvent) window.attachEvent("onload", sfHover);*/
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
//window.onload=startList;
if (window.attachEvent) window.attachEvent("onload", startList);

Código:

#menu{
	font-size:.7em;
	font-weight:bold;
	width:220px;
	float:left;
	height:auto;
	margin-bottom:0;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	background:#404e5f url(../img/fondo_menu.gif) repeat-y left top;
}
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 220px; /* Width of Menu Items */
/*	border-bottom: 1px solid #ccc;*/
	background:#404e5f url(../img/fondo_menu.gif) repeat-y left top;
	}
#menu li{
	color:#ff9900;
	border-top:1px solid #596574;
	border-bottom:1px solid #303c4a;
}
#menu ul li {
	position: relative;
	}
	
#menu li ul {
	position: absolute;
	left: 220px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
#menu ul li a {
	padding: 1px;
	padding-left:25px;
	display:block;
	text-decoration:none;
	line-height:2em;
	height:2em;
	color:#ff9900;
	background: url(../img/vineta.gif) no-repeat 1em center;
}
#menu li ul li a{
	background:#404e5f url(../img/vineta.gif) no-repeat 1em center;
}
/* Fix IE. Hide from IE Mac \*/
* html #menu ul li { float: left; height: 1%; }
* html #menu ul li a { height: 1%; }
/* End */

#menu ul li a:hover {
	color:#fff;
	background:#596574 url(../img/vineta2.gif) no-repeat 1.3em center;
}
#menu li:hover ul, #menu li.over ul { display: block; } /* The magic */

Gracias y saludos.

[Papeluis]

Hola :
Te sugiero que te cambies de programa para generar menus, yo utilizo el DHTMLMenu de Sothink y se bien en todos los navegadores, mira, yo utilizo un menú en mi sitio(triple doble w punto muestrate punto cl), el que yo puse no tiene imágenes pero se las puedes colocar, además de muchos efectos.

Espero te sirva.

[xaguar]

Hola,

Yo tengo ese código en su estado original. y la principal diferencia que encuentro son las dos últimas lineas en el javascript. en el código que tengo funciona bien en opera y firefox, prueba eliminar la úñtima linea, y quita el comentario de la anterior. (Asi esta en el código original y funciona bien). Espero haber sido de ayuda con tu problema. Saludos.

[Pipeline]

Pues este post me viene al pelo, por que iva a abrir uno preguntando por el mismo codigo que habeis puesto. El caso es que yo lo tengo como dice xaguar con la penultima linea del javascript descomentada y sin la ultima linea, pero yo solo lo veo bien en Opera y Firefox, pero no en IExplorer.

El caso es que el ejemplo de la pagina web si que lo veo en IE, Mozilla y Opera, pero lo que tengo yo, siendo los dos iguales ( o al menos eso creo vamos )

Un saludo y gracias

Edito: Me acabo de dar cuenta de que tenia un pequeño fallo, habia borrado la linea que hacia referencia al *.js. Yo creo que en el codigo de arriva sobra la ultima linea y descomentar la penultima.
GRacias

[xaguar]

Hola de nuevo,
ya hice unas pruebas y el java script esta bien. no importa la lina comentada.
el problema es el css. y si lo vo veo bien en todos los navegadores que tengo instalados (5 en total). les pongo el código del CSS.

Código:

/* CSS Document */
body {
	font: normal 11px verdana;
	}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	}

ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	}

/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff; /* IE6 Bug */
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
		
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
		
li:hover ul, li.over ul { display: block; } /* The magic */

Chequenlo, si funciona.

[yconoclasta]

Muchas gracias por sus comentarios, a todos !

Pero, el problema era algo de lo más simple. Estaba mal formado mi documento HTML !!!

Tenía mal anidadas las listas por ello no funcionaba en firefox (quien si hace caso de los estandares )

Consejo: SIEMPRE validar hojas de estilos y documentos HTML con las herramientas del w3c, luego preguntar en foros.

La forma de la lista que tenía era:
<ul>
<li>tema 1</li>
<ul>
<li>subtema 1.1</li>
<li>subtema 1.2</li>
</ul>
<li>tema 2</li>
<ul>
<li>subtema 2.1</li>
<li>subtema 2.2</li>
</ul>
</ul>

y debe de ser:
<ul>
<li>tema 1
<ul>
<li>subtema 1.1</li>
<li>subtema 1.2</li>
</ul>
</li>
<li>tema 2
<ul>
<li>subtema 2.1</li>
<li>subtema 2.2</li>
</ul>
</li>
</ul>

Pueden verlo corregido en la misma liga.
Saludos.