JSFiddle - React, Tailwind, and code Playground

by Marcel Ferdinand

HTML

<a href="javascript:void(0);" class="btnTest">Open Menu</a>
<div class="promoMenu">
<div class="levelOneCon">
  
  <a class="pSubMenu" data-link="makeup" href="javascript:void(0);">MAKEUP</a>
  <a class="pSubMenu" data-link="skincare" href="javascript:void(0);">SKINCARE</a>
  <a class="pSubMenu" data-link="personalcare" href="javascript:void(0);">PERSONAL CARE</a>
  <a class="pSubMenu" data-link="health" href="javascript:void(0);">HEALTH</a>
 
  
</div>

<div class="leveTwoCon">
  <div class="catCon makeup">
    <ol>
      <li>MAKEUP</li>
      <li>xxx</li>
      <li>xxx</li>
    </ol>
  </div>
  <div class="catCon skincare">
    <ol>
      <li>SKINCARE</li>
      <li>xxx</li>
      <li>xxx</li>
    </ol>
  </div>
  <div class="catCon personalcare">
    <ol>
      <li>PERSONAL CARE</li>
      <li>xxx</li>
      <li>xxx</li>
    </ol>
  </div>
  <div class="catCon health">
    <ol>
      <li>HEALTH</li>
      <li>xxx</li>
      <li>xxx</li>
    </ol>
  </div>
</div>

</div>

CSS

.promoMenu{
  display:none;
}

.leveTwoCon div{
  display:none;
}

JavaScript

$('.btnTest').click(function(){

	$('.promoMenu').toggle();

});

var pMenuHover;
$('.pSubMenu').hover(function(){
	pMenuHover= $(this).data("link");
  $('.catCon').hide();
  $('.'+pMenuHover).show();
	console.log(pMenuHover)

});