JSFiddle - React, Tailwind, and code Playground

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(){
	alert('nooo');
jQuery(this).parent().addClass("hovered");
});