JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
  <li class="nav menu-item"><a href="#">Item 1</a></li>
  <li class="nav menu-item"><a href="#">Item 2</a></li>
  <li class="nav menu-item"><a href="#">Item 3</a></li>
</ul>

<div class="mega-menu-container">
  <div class="mega-menu menu-item">Content 1</div>
  <div class="mega-menu menu-item">Content 2</div>
  <div class="mega-menu menu-item">Content 3</div>
</div>

CSS

li:hover {
  background: yellow
}

.mega-menu.slide {
  background-color: red;
}

JavaScript

$('.menu-item').hover(function() {
  var self=$(this);
  $('.mega-menu').eq($(this).index()).toggleClass('slide');
  console.log(self.index());
});