JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        level 1
        <ul>
            <li>1a</li>
            <li>1b</li>
        </ul>
    </li>
    <li>
        level 2
        <ul>
            <li>
                level 3
                <ul>
                    <li>3a</li>
                    <li>3b</li>
                </ul>
            </li>
            
            <li>3e</li>
            <li>3f</li>
        </ul>
    </li>
</ul>

CSS

ul{
    margin:3px;
    border:1px solid red;  
}
ul ul{
    display:none;   
}
ul li:hover>ul{
    /*display:block;   */
}
ul li ul li { background:blue; }
ul li ul li ul li { background:green; maargin-left:20px;}

JavaScript

$('li').click(function(ev) {
    $(this).find('>ul').slideToggle();
    ev.stopPropagation();
});