JSFiddle - React, Tailwind, and code Playground

by Ag666

HTML

<ul id="menu">
    <li>enlace 1</li>
    <li>enlace 2
        <ul>
            <li>Sub enlace 1</li>
            <li>Sub enlace 2</li>
            <li>Sub enlace 3</li>
            <li>Sub enlace 4</li>
        </ul>
    </li>
    <li>enlace 3
        <ul>
            <li>Sub enlace 1</li>
            <li>Sub enlace 2</li>
            <li>Sub enlace 3</li>
            <li>Sub enlace 4</li>
        </ul>
    </li>
    <li>enlace 4
        <ul>
            <li>Sub enlace 1</li>
            <li>Sub enlace 2</li>
            <li>Sub enlace 3</li>
            <li>Sub enlace 4</li>
        </ul>
    </li>
    <li>enlace 5
        <ul>
            <li>Sub enlace 1</li>
            <li>Sub enlace 2</li>
            <li>Sub enlace 3</li>
            <li>Sub enlace 4</li>
        </ul>
    </li>
    <li>enlace 6</li>
</ul>

CSS

#menu{float:left;width:200px;}
#menu,#menu ul{margin:0;padding:0;}
#menu li{font:12px/2 arial,verdana,tahoma;color:#333;list-style:none;padding:0 8px;border:1px #ccc solid;}
#menu li:hover,#menu li.activo{background:#d9d9d9;}
#menu li ul{margin-bottom:8px;background:#fff;display:none;}
#menu li.activo ul{display:block;}
#menu li li:hover{background:#dfdfdf}

JavaScript

$(document).ready(function(){
    var sections = $("#menu li");
    sections.click(function(){
        sections.removeClass("activo");
        sections.click($(this).addClass("activo"));
    });
});