JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>normal</li>
  <li>normal</li>
  <li class="dropdown">
    hover me
    <ul class="dropdown-content">
      <li>hidden</li>
      <li>hidden</li>
    </ul>
   </li>
</ul>

CSS

ul {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

ul > li {
  display: inline-block;
}

ul > li.dropdown > ul.dropdown-content {
  display: none;
  position: absolute;
  background-color: red;
  min-width: 100px;
}

ul > li.dropdown:hover > ul.dropdown-content {
  display: block;
}

ul.dropdown-content li {
  display: block;
}

JavaScript

$('.dropdown').hover(function() {
	$('.dropdown-content', this).fadeIn(1000);
}, function() {
	$('.dropdown-content', this).fadeOut(1000);
});