JSFiddle - React, Tailwind, and code Playground

HTML

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

<ul>
    <li style="float:left;" >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>

JavaScript

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