JSFiddle - React, Tailwind, and code Playground

by thecodeparadox

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>
</ul>

JavaScript

$('.menu > .expanded > .menu > li > a').on('hover', function(e) {
    var li = $(this).closest('.expanded').find('a:first');
    if (e.type == 'mouseenter') {
        li.css('background', '#f00');
    } else {
        li.css('background', '#fff');
    }
});