JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
<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').hoverIntent(function(){
    if (!$(this).hasClass('active')){
      $('#nav li ul').slideUp(800);
      $(this).next().slideToggle(800);
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
    }
  }, function() {
    if ($(this).hasClass('active')){
      $(this).next().slideUp(800);
      $(this).removeClass('active');
    }  
  });
  return false;
});