JSFiddle - React, Tailwind, and code Playground

HTML

<!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">
</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>

CSS

ul ul{ display: none; }
li { padding: .5em 1em; }
li:hover{ background-color: rgba(255,0,0,.1); }

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; }
    };
};