Navegacion de arbol, con listas

Desde hace mucho tiempo he visto menus de navegacion de tipo arbol hechos con JS. Los menus de navegacion tipo arbol son los que son parecidos a estos:

En donde hay jerarquias, y un elemento de la lista puede o no contener a mas elementos, y asi recursivamente.

Todos los ejemplos que he bajado, son enormemente complicados, pesan muchos kilobytes y son dificiles de implementar, y casualmente, ayer me pidieron una navegacion de ese tipo.

Como no me gusta andar batallando, mejor me puse a hacer mi propia version de estos menus de navegacion. En (x)HTML, este tipo de navegaciones se puede implementar con listas, que basicamente, tienen el mismo concepto de jerarquias, items, etc. Y salio algo bastante interesante.

Codigo JS

function flip(id){
    lista = id.getElementsByTagName("ul")[0];
    if(lista.style["display"] == ""){
        lista.style["display"] = "block";
        id.firstChild.src = "explorer_collapse.gif";
    } else {
        lista.style["display"] = "";
        id.firstChild.src = "explorer_expand.gif";
    }
}

function inicializa(id){
    inicio = document.getElementById(id);
    root_items = inicio.getElementsByTagName("li");
    for(i=0; i 0){
            img.src="explorer_expand.gif";
            img.onclick = function(){
                flip(this.parentNode);
            }
        } else {
            img.src="explorer_dot.gif"
        }
        root_items[i].insertBefore(img, root_items[i].firstChild);
    }
}

Codigo CSS

body {
    color: black;
    font-size: 12px;
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    text-decoration: underline;
}

/* Aqui es el estilo de la lista */

li img {
    vertical-align: middle;
}

ul {
    list-style-type: none;
}

ul ul{
	display: none;
}

Aqui esta el demo funcionando. No es muy bonito, pero jala bien

La explicacion?? No tiene ciencia. Solamente hay que incluir los archivos de JS y CSS en la pagina, hacer una lista como cualquier otra, definiendole un ID al inicio de la misma y mandando llamar a la funcion inicializa en el evento onload de body.