considero que te estás complicando mucho. deberías mirar el concepto de delegación de eventos. en lugar de asignar un evento para cada elemento, le asignas un sólo evento al elemento ancestro común. luego a través del objeto Event.target manejas cómo mostrar y ocultar la lista. a continuación un ejemplo que te puede servir de idea aunque para mis gusto está un poco mal implementado. lo que hace es simple, mantiene una variable de la última lista activa. luego esconde todos los elementos UL ancestro hasta el elemento ancestro común (el UL principal). luego hace lo mismo, pero mostrando la nueva lista. nótese que la estructuración html es importante ya que el script se maneja por los nodos.
http://jsfiddle.net/kRHqH/1/
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Devel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
ul ul{ display: none; }
li { padding: .25em; }
li:hover{ background-color: rgba(255,0,0,.1); }
</style>
<script type="text/javascript">
self.onload = function(){
var active = null;
document.getElementById('menuArbol').onclick = function(event){
var ul = event.target.firstChild.nextSibling;
if(!(ul && /ul/i.test(ul.nodeName)) ) return;
if(ul == active){ ul.style.display = ul.style.display? '': 'block'; return; }
while(active && active != this){ if(/ul/i.test(active.nodeName)) active.style.display = ''; active = active.parentNode; }
active = ul;
while(ul != this){ if(/ul/i.test(ul.nodeName)) ul.style.display = 'block'; ul = ul.parentNode; }
};
};
</script>
</head>
<body>
<ul id="menuArbol">
<li>lenguajes
<ul>
<li>programacion
<ul>
<li>javascript</li>
<li>python</li>
<li>perl</li>
<li>java</li>
</ul>
</li>
<li>marcado
<ul>
<li>html</li>
<li>xml</li>
<li>sgml</li>
<li>obml</li>
</ul>
</li>
</ul>
</li>
<li>aplicaciones</li>
<li>tecnologias
<ul>
<li>movil</li>
<li>tv</li>
<li>portatil</li>
<li>desktop</li>
</ul>
</li>
</ul></body></html>