JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>
      Dropdown
      <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></a></li>
      </ul>
    </li>
    <li>
      Dropdown
      <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

nav > ul > li {
  display: inline-block
}
nav > ul > li ul {
  display: none;
  position: absolute;
  top: 105%;
  left: 0;
}
nav > ul > li:hover ul {
  //visibility: visible;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav li {
  width: 100px;
  background: #eee;
  margin: 2px;
  position: relative;
  padding: 10px;
}
nav a {
  display: block;
  
}

body {
  padding: 10px;
}

JavaScript

var timeout;

$('nav > ul > li').on({
    mouseenter: function () {
    	clearTimeout(timeout);
        $('nav > ul > li > ul').hide();
        $('ul', this).show();
    },
    mouseleave: function () {
    	var self = this;
    	timeout = setTimeout(function() {
    		$('ul', self).hide();
        }, 500);
    }
});