JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <button class="menu-trigger">menu-icon</button>
    <ul>
        <li><a href="#">Child 1</a></li>
            <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><a href="#">Child 2</a></li>
            <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><a href="#">Child 3</a></li>
            <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>
    </ul>
</nav>

CSS

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

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

nav ul ul {
	display: none;
}

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

JavaScript

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

$('.menu-trigger').on('click', function () {
    $(this).next().toggle();
});

$('nav > ul > li').hover(function(){
        $(this).hide();
        $(this).next().show();
    });
$('nav > ul > ul').mouseleave(function(){
        $('nav > ul > li').show();
        $('nav > ul > ul').hide();
});