JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<ul class="sub-menu shopsubmenu">
  <div class="menulist">
    <h3>Produktkategorie:</h3>
    <li class="submenu_item">Gesicht</li>
    <li class="submenu_item">Haare</li>
    <li class="submenu_item">Körper</li>
    <li class="submenu_item">Sets</li>
    <li class="submenu_item">Alle produkte</li>
  </div>
	
	  <div class="menulist">
    <h3>Hauttyp:</h3>
    <li class="submenu_item">Trockene Haut</li>
    <li class="submenu_item">Normale bis Mischhaut</li>
    <li class="submenu_item">Ölige Haut</li>
    <li class="submenu_item">Sensible bis allergische</li>
    <li class="submenu_item">Haut</li>
  </div>
	
	  <div class="menulist">
    <h3>Hilfe bei:</h3>
    <li class="submenu_item">Unreinheiten</li>
    <li class="submenu_item">Fahler Teint</li>
    <li class="submenu_item">Rötungen</li>
    <li class="submenu_item">Trockenheit</li>
    <li class="submenu_item">Spliss</li>
    <li class="submenu_item">Trockenheit</li>
    <li class="submenu_item">Spliss</li>
    <li class="submenu_item">Rasurbrand</li>
    <li class="submenu_item">Schwangerschaftsstreifen</li>
    <li class="submenu_item">Falten</li>
    <li class="submenu_item">Stress</li>
  </div>
</ul>

<ul class="sub-menu shopsubmenu">

</ul>

<ul class="sub-menu shopsubmenu">

</ul>

JavaScript

jQuery(document).ready(function() {
    jQuery('.submenu_item').hover(function() {
      //jQuery('.each_popular_product').removeClass('active');
      jQuery('a').removeClass('active');
      //jQuery(this).find('.each_popular_product').addClass('active');
      jQuery(this).find('a').addClass('active');
    });

    jQuery('.custom-menu li').each(function() {
      if (jQuery(this).hasClass('active-menu')) {
        if (jQuery(this).parents('ul.sub-menu').length) {
          jQuery(this).parents('li').addClass('active-menu');
        }
      }
    });
  });