JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>aaa</li>
    <li>bbb111
        <ul>
            <li>aaa</li>
            <li>ccc222
                <ul>
                    <li>aaa</li>
                    <li>aaa</li>
                    <li>aaa</li>
                    <li>aaa</li>
                    <li>aaa</li>
                </ul>            
            </li>
            <li>aaa</li>
            <li>aaa</li>
            <li>aaa</li>

        </ul>    
    </li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
</ul><ul>
    <li>aaa</li>
    <li>bbb
        <ul>
            <li>aaa</li>
            <li>bbb
                <ul>
                    <li>aaa</li>
                    <li>aaa</li>
                    <li>aaa</li>
                    <li>aaa</li>
                    <li>aaa</li>
                </ul>            
            </li>
            <li>aaa</li>
            <li>aaa</li>
            <li>aaa</li>

        </ul>    
    </li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
</ul>

CSS

li{margin-left:30px;}

JavaScript

$('li ul').hide();

    $('li').hover(
        function(){
            $('> ul',this).stop().show(200);
        },
        function(){
            $('> ul',this).stop().hide(200);
        }
    );