JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="head">
    <li>Parent</li>
    <li>Parent2</li>
    <li>Parent3
      <ul>
          <li>child</li>
      </ul>              
    </li>
</ul>

CSS

ul li ul {
    display: none
}
#head {
 background-color: #00FFFF;   
}

JavaScript

$('#head').mouseleave(function() {
       
        $(this).find('li ul').each(function () {
            $(this).stop().slideUp('slow');
        });
    });

    $("ul li").mouseenter(function() { $(this).children('ul').stop().slideDown('slow'); });