JSFiddle - React, Tailwind, and code Playground

by Paulo

HTML

<ul class="main-menu">
  <li>
    <a>MENU ITEM
    <ul class="sub-menu">
    <li>sub-menu item</li>
    </ul>
  </a>
  </li>
</ul>

CSS

.main-menu .sub-menu {
  display: none;
}

.main-menu li:hover .sub-menu {
  display: block;
}

.hovered {
  color: red;
}

JavaScript

jQuery(".main-menu ul.sub-menu).hover(function(){
jQuery(this).parent().addClass("hovered");
});