JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<ul class="myMenu">
  <li>Menu item
    <ul>
      <li>Sub menu item</li>
      <li>Sub menu item</li>
      <li>Sub menu item</li>
    </ul>
  </li>
  <li>Menu item
      <ul>
      <li>Sub menu item</li>
      <li>Sub menu item</li>
      <li>Sub menu item</li>
    </ul>
  </li>
  <li>Menu item</li>
  <li>Menu item</li>
  <li>Menu item</li>
</ul>

CSS

.myMenu li ul{
  display: none;
}

JavaScript

$(document).ready(function() {

    $('.myMenu li').on('mouseover', function(){

        $(this).find('ul').stop().slideDown();

    }).on('mouseout', function(){

        $(this).find('ul').stop().slideUp();

    });