JSFiddle - React, Tailwind, and code Playground

by harpax

HTML

<ul class="menu" id="root">
  <li class="first leaf"><a href="#" title="" class="active">Home</a></li>
  <li class="expanded"><a href="#" title="Products">Products</a>
    <ul class="menu">
      <li class="first leaf"><a href="#">Product 1</a></li>
      <li class="leaf"><a href="#">Product 2</a></li>
      <li class="leaf"><a href="#">Product 3</a></li>
      <li class="last leaf"><a href="#">Product 4</a></li>
    </ul>
  <li>
  <li class="expanded"><a href="#" title="Products">Products Level 2</a>
    <ul class="menu">
      <li class="first leaf"><a href="#">Product 5</a></li>
      <li class="leaf"><a href="#">Product 6</a></li>
    </ul>
  <li>
</ul>

CSS

.test > a {
color: red;        
}

JavaScript

$(".menu .menu li a").hover(
    function() {
        $(this).parents("#root > li").addClass('test'); 
    },
    function() {
        $(this).parents("#root > li").removeClass('test');
    }    
);