JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
  <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>

JavaScript

$('li.leaf').on('hover', function(e) {
       var li = $(this).closest('.expanded').find('a:first');
       if(e.type == 'mouseenter') li.css('background', 'rgba(0,0,0,0.5)','color', '#FFF');
       else li.css('background', '#fff');
    });