JSFiddle - React, Tailwind, and code Playground

by leslie20

HTML

<ul id="nav" class="nav menu">
<li><a href="#">Main 1</a>
    <ul>
    <li><a href="#">Sub 1</a></li>
    <li><a href="#">Sub 2</a></li>
    <li><a href="#">Sub 3</a></li>
    </ul>

</li>
<li><a href="#">Main 2</a>
<ul>
    <li><a href="#">Sub 1</a></li>
    <li><a href="#">Sub 2</a></li>
    <li><a href="#">Sub 3</a></li>
    </ul>
</li>
<li><a href="#">Main 3</a>
<ul>
    <li><a href="#">Sub 1</a></li>
    <li><a href="#">Sub 2</a></li>
    <li><a href="#">Sub 3</a></li>
    </ul>
</li>
</ul>

CSS

#nav li ul {
    display: none; // used to hide sub-menus
}

JavaScript

$(document).ready(function () {
  $('#nav > li > a').hover(function(){
    if ($(this).attr('class') != 'active'){
      $('#nav li ul').slideUp(800);
      $(this).next().stop().slideToggle(800);
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
    }
  });
    return false;
});