JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
            <ul>
                <li>
                    menu
                    <ul>
                        <li>
                            menu
                        </li>
                        <li>
                            menu
                        </li>
                        <li>
                            menu
                        </li>
                    </ul>
                </li>
                <li>
                    menu
                </li>
                <li>
                    menu
                    <ul>
                        <li>
                            menu
                        </li>
                        <li>
                            menu
                        </li>
                        <li>
                            menu
                        </li>
                    </ul>
                </li>
                <li>
                    menu
                </li>
                <li>
                    menu
                    <ul>
                        <li>
                            menu
                        </li>
                        <li>
                            menu
                        </li>
                        <li>
                            menu
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

CSS

ul{
    width: 0;
    padding-left: 0;
}
li > ul{
    margin-left: 50px;
}
li{
    background-color: #cecece;
    list-style: none;
    width: 50px;
    height: 19px;
    text-align: center;
    border: 1px solid black;
}
ul.submenu{
    margin-top: -20px;
    display: none;
    width: 50px;
}
li.submenu{
    cursor: pointer;
}

JavaScript

$(function(){
    $('div.menu > ul > li > ul')
        .addClass('submenu')
        .parent()
            .addClass('submenu')
            .on('mouseenter',function(){
                $(this).children('ul').show(200);
            })
            .on('mouseleave',function(){
                $(this).children('ul').hide(200)
            });
});