JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <button>menu-icon</button>
    <ul>
        <li> <a href="#">Child 1</a>

            <ul>
                <li><a href="#">Sub-child 1</a>
                </li>
                <li><a href="#">Sub-child 2</a>
                </li>
                <li><a href="#">Sub-child 3</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Child 2</a>

            <ul>
                <li><a href="#">Sub-child 1</a>
                </li>
                <li><a href="#">Sub-child 2</a>
                </li>
                <li><a href="#">Sub-child 3</a>
                </li>
            </ul>
        </li>
        <li> <a href="#">Child 3</a>

            <ul>
                <li><a href="#">Sub-child 1</a>
                </li>
                <li><a href="#">Sub-child 2</a>
                </li>
                <li><a href="#">Sub-child 3</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

CSS

ol, ul, li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

nav > ul >li {
	min-height: 40px;
}

nav ul ul li {
	display: inline;
	padding: 0 5px;
}

JavaScript

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

$('nav button').on('click', function () {
    $(this).next().toggle();
});

$('nav > ul > li').hover(function(){
        $(this).find('ul').toggle();
    });