No creo que el objetivo de Fernand0 sea reinventar la rueda sino aprender.
Si entendí bien tu objetivo, Fernand0, lo que necesitás en definitiva es lo mismo que esto:
http://kusor.net/traducciones/brainj...vents5.es.html (te recomiendo que leas el artículo completo, que es muy interesante). Y si te fijás, eso mismo es lo que uso acá:
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style>
.mostrar{ display:block;}
.ocultar{display:none;}
li{padding:5px;}
</style>
<script>
function $(id){return document.getElementById(id);}
function addEvent(obj, evType, fn, useCapture){
if(obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
}else if(obj.attachEvent){
obj.attachEvent("on"+evType, fn);
}else{
obj['on'+evType]=fn;
}
}
function contains(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function mostrar(e){
var e=e || window.event;
var obj=e.target || e.srcElement;
var obj2=obj.getElementsByTagName('ul');
if(obj2)
for(var i=0,l=obj2.length;i<l;i++)
obj2[i].className='mostrar';
}
function ocultar(e){
var current, related;
var e=e || window.event;
var obj=e.target || e.srcElement;
if(window.event) {
current = e.srcElement;
related = e.toElement;
}else{
current = e.currentTarget;
related = e.relatedTarget;
}
if (current != related && !contains(current, related)){
var obj2=obj.getElementsByTagName('ul');
if(obj2)
for(var i=0,l=obj2.length;i<l;i++)
obj2[i].className='ocultar';
}
}
function inicio(){
var elems=$('Menu0').getElementsByTagName('li');
for(var i=0,l=elems.length;i<l;i++){
if(elems[i].parentNode!=$('Menu0'))continue;
addEvent(elems[i],'mouseover',mostrar,false);
addEvent(elems[i],'mouseout',ocultar,false);
}
}
window.onload=inicio;
</script>
</head>
<body>
<ul id="Menu0">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu 2</a>
<ul class="ocultar">
<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 class="ocultar">
<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>
</body>
</html>