JSFiddle - React, Tailwind, and code Playground

by Tig7r

HTML

<nav class="NavMenu">
  <ul class="ul_menu">
  <li class='item'><a href="#"><span>Home</span></a></li>
  <li class='item'><a><span>Categories</span></a></li>
  </ul>
</nav>


<div class="subLevel MegaMenuDiv" id="MegaMenuDiv">
  <div class="custom_megamenu_wrapper">
   <ul class="main-category-list has-children"><li><a href="javascript:void(0)" class="Parent_Mega_Menu_Categories MegaMenuLinkMainWithChildren" style="">Accessories</a>
      <ul class="secondary-items">
      <li><a href="https://www.google.com" class="MegaMenu_Child_Link" style="">Accessory Holders</a></li>
      <li><a href="https://www.google.com" class="MegaMenu_Child_Link" style="">Whiteboard Starter Pack</a></li>
   </ul></li>
</ul>
 </div>
</div>

CSS

.NavMenu{
  width:100%;
  height:40px;
  background-color:red;
  color:white !important;
}

.NavMenu ul li{
  list-style:none;
  display:inline-block;
  padding:10px;
}

.ul_menu li a:link{
  color:white;
}

.ul_menu li a:hover{
  color:black;
}

#MegaMenuDiv{
  background:black;
  color:white;
  position:absolute;
  width:550px;
  display:none;
  min-height:300px;
}

.MegaMenuDiv a:link{
  color:white;
}

.displayHiddenMenu{
  display: block !important;
}

.main-category-list li{
  list-style:none;
}

.secondary-items{
  background: #31383e;
  position: absolute;
  top: 0;
  left: 150px;
  width: calc(80vw - 50%);
  height: auto;
  list-style: none;
  /* padding: 20px; */
  display: none;
  height: 92%;
  overflow-y: auto;
  padding-top: 0px;
  z-index: 1000;
  max-width: 840px;
  padding-top: 13px;
  line-height: 2;
}

.secondary-items a:link, .secondary-items a:visited{
  color:white !important;
}

JavaScript

$(document).ready(function () {

    var touched = false;

        $(".item:contains(Categories)").on("mouseenter click", function (e) {
            if (!touched) {
                e.type == 'click' ? $('.MegaMenuDiv').toggleClass("displayHiddenMenu") : $('.MegaMenuDiv').addClass("displayHiddenMenu");
            }
        }).on('touchstart', function (e) {
            touched = true;
            setTimeout(function () {
                touched = false;
            }, 300);
            // do touchstart stuff (similar to click or not)
            // toggle MegaMenuDiv on click
            if ($('.MegaMenuDiv').hasClass('displayHiddenMenu')) {
                $('.MegaMenuDiv').removeClass("displayHiddenMenu");
            } else {
                $('.MegaMenuDiv').addClass("displayHiddenMenu");
            }
        });

        $('.MegaMenuDiv').on("mouseleave", function () {
            if (!touched) {
                $('.MegaMenuDiv').removeClass("displayHiddenMenu");
            }
        });

        // MegaMenuLinkMainWithChildren - Show children items
        $(".MegaMenuLinkMainWithChildren").on('mouseenter touchstart click', function () {
            // toggle MegaMenuDiv
            $('.MegaMenuLinkMainWithChildren').next().removeClass('displayHiddenMenu');
            $(this).next().addClass('displayHiddenMenu');
        });

        //Removes the sub-menu when hovering over other menu items
        $('.item').not(".item:contains(Categories)").hover(function () {
            console.log('Hovering over other items, remove class');
            if ($('.MegaMenuDiv').hasClass('displayHiddenMenu')) {
                $('.MegaMenuDiv').removeClass("displayHiddenMenu");
            }
        });
        
        //Add a cursor the the pointer
        $(".item:contains(Categories)").css("cursor", "pointer");

    });