Sólo agregar que hay otra manera de hacerlo, deteniendo el burbujeo de eventos. Pero esa manera sólo funciona si puede usarse la palabra reservada this (para referirse al objeto que dispara el evento) dentro de la función que maneja el evento.
Eso sucede automáticamente con addEventListener, pero no con attachEvent. No obstante, cambiando un poco la función addEvent, podemos hacer que this tenga el significado que necesitamos para Explorer en lugar de apuntar a window, como sucede con el addEvent que venimos usando.
La implementación con ese cambio sería esta:
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){
//var hash=new Date().getTime().toString();
obj[fn+evType]=fn;
obj['b'+fn+evType]=function(){obj[fn+evType](window.event);}
obj.attachEvent("on"+evType, obj['b'+fn+evType]);
}else{
obj['on'+evType]=fn;
}
}
function stopEvent(e) {
if (!e) e = window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
function mostrar(e){
var obj2=this.getElementsByTagName('ul');
if(obj2)
for(var i=0,l=obj2.length;i<l;i++)
obj2[i].className='mostrar';
}
function ocultar(e){
var obj2=this.getElementsByTagName('ul');
if(obj2)
for(var i=0,l=obj2.length;i<l;i++)
obj2[i].className='ocultar';
stopEvent(e)
}
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>
(La idea no es mía sino de John Resig, el creador de JQuery:
http://ejohn.org/projects/flexible-javascript-events/)