Hola
Fernand0:
Posteo un ejemplo ejecutable de tu menú, he hecho algunas modificaciones:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
ul#Menu0 {
width: 120px;
list-style: none;
}
ul#Menu0 li {
width: 120px;
position: relative;
}
ul#Menu0 li a {
display: block;
}
ul#Menu0 li:hover>a {
color: #FF9900;
}
ul#Menu0 ul {
left: 120px;
top: -2px;
position: absolute;
display: none;
list-style: none;
}
</style>
</head>
<body>
<ul id="Menu0">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2 - 1</a></li>
<li><a href="#">Menu 2 - 2</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3 - 1</a></li>
<li><a href="#">Menu 3 - 2</a>
</li>
<li><a href="#">Menu 3 - 3</a></li>
</ul>
</li>
</ul>
<div id="div"></div>
<script type="text/javascript">
<!--
// document.getElementById abreviado
function $(x) { return document.getElementById(x); }
function MakeMenu(id)
{
var padre = $(id);
var LI=padre.childNodes;
for(var i=0; i<LI.length; ++i)
{
if( LI[i].nodeType==1 ) { // si es un nodo HTML Element y no un nodo de texto
//addEvent(LI[i], 'mouseover',Show);
LI[i].onmouseover = Show;
LI[i].id='LI:'+i;
}
}
}
window.onload = function() {
MakeMenu("Menu0");
}
function Show(event)
{
var ev3nt=event || window.event;
var t0=ev3nt.target || ev3nt.srcElement;
var Div=$('div');
var l0c=fN(t0, 'LI');
Div.innerHTML+=l0c.id+'<br>';
var hijosUL = l0c.getElementsByTagName('UL');
if( hijosUL.length>0 )
l0c.getElementsByTagName('UL')[0].style.display='block';
}
function fN(id, n0de)
{
Node=id;
while(Node.nodeName!=n0de)
{
Node=Node.parentNode;
}
return(Node);
}
// -->
</script>
</body>
</html>
Problemas: No tenemos un ejemplo completo, sino cachos incoherentes: hay que cohesionarlos; El CSS no encajaba con el HTML; Necesitamos arrancar el menú con
MakeMenu("Menu0"); la función
fN(id, n0de) no era demasiado eficiente, la he cambiado, al parecer no funcionaba como debía;
addEvent() no lo tenía definido, así que lo he comentado; y un montón de variables no eran locales, faltaba
var delante... pocas facilidades
El error principal: El error principal estaba en
MakeMenu(), ya que coges
todos los hijos LI que cuelgan de un elemento, no sólo los LI que cuelgan directamente, sino todos los de los hijos de los hijos de los hijos.
En
Show(), si vamos a mostrar submenú ¡debes comprobar que antes exista! No puedes tratar la propiedad
style.display de un elemento inexistente.
Te recomiendo dos cosas: Realizar tus códigos muy poco a poco: Crea
MakeMenu(id) y asegúrate que hace lo que tú quieres. Si no lo haces el error será más dificil de localizar después. Haces
Show(event), y si para ello necesitas una función auxiliar
fN(id, n0de) es recomendable fabricarla en un documento a parte, y cerciorarse que funciona como se espera. Después la pegaremos donde queramos.
La segunda recomendación es usar nombres de variables descriptivos y legibles.
node de
n0de son fácilmente confundible, y una variable llamada
l0c,
ev3nt o
t0 tampoco ayudan a la legibilidad.
Creo que necesitas limpiar el código, verificar que funciona todo como quieres y desarrollar una
Hide().
Con calma, pero no vengas con 100 líneas de código para intentar encontrar el error, depura poco a poco.
Un saludo
