JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dropdown">
  <li>aaa</li>
  <li>aaa</li>
  <li>aaa</li>
  <li>aaa</li>
  <li>aaa</li>
</ul>

CSS

li.hover {
  background: red;
}

JavaScript

$("ul.dropdown li").hover(function () {
  setTimeout(() => {
    $(this).addClass("hover");
    $('ul:first',this).css('display', 'block');
  }, 1000);
}, function() {
  setTimeout(() => {
    $(this).removeClass("hover");
    $('ul:first',this).css('display', 'none');
  }, 1000);
});