JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title></title>
</head>
<body>

<ul>
    <li>menu one
        <ul  style="display:none;">
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ul>
    </li>
    <li>menu two
        <ul  style="display:none;">
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ul>
    </li>
</ul>

</body>
</html>

CSS

body > ul > li {display: inline-block}

JavaScript

$('li').has('ul').click(function(){
    $(this).children('ul').stop().show(300);
    }).mouseout(function(){
    $(this).children('ul').stop().hide(300);
    })