JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<ul class="main-menu">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Products</a>
        <ul class="sub-menu">
            <li><a href="">Categories</a></li>
            <li><a href="">Sub categories</a></li>
        </ul>    
    </li>
</ul>

CSS

a{
    text-decoration:none;
}

a:hover{
    color:red;
}

li.active > a{
    color:red;
}

JavaScript

$('li a').hover(function(){
     $('li').removeClass('active');
     $(this).parents("li").addClass('active')
 },function(){
      $('li').removeClass('active');
});