JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js&quot;     integrity=&quot;sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=&quot;     crossorigin=&quot;anonymous&quot;"></script>
<div id="site-overlay"></div>
<div class="header-categories pull-right hidden-xs hidden-sm">
  <ul class="header-categories-list list-unstyled">
    <li class="header-categories-item header-categories-item-active"><a href="<?php echo $category['href']; ?>">category name 1</a>
      <ul class="header-categories-dropdown list-unstyled">
        <li><a href="#">test 1</a></li>
        <li><a href="#">test 2</a></li>
      </ul>
    </li>
    <li class="header-categories-item header-categories-item-active"><a href="#">category name 2</a>
      <ul class="header-categories-dropdown list-unstyled">
        <li><a href="#">test 3</a></li>
        <li><a href="#">test 4</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS

.header-categories {
      position: relative;
      clear: both;
      background: #fff;
      z-index: 10;
    }
    
    .header-categories-list {
      margin-bottom: 0;
    }
    
    .header-categories-item {
      display: inline-block;
      vertical-align: top;
      letter-spacing: 0.2rem;
      line-height: 1;
      font-size: 13px;
      padding-top: 15px;
      padding-bottom: 15px;
      padding-left: 15px;
      padding-right: 15px;
      margin-right: -5px;
    }
    
    .header-categories-item a {
      color: #000;
    }
    
    .header-categories-item-block {
      display: block;
      padding: 0;
      border-top: 1px solid $black;
    }
    /* overlay */
    
    #site-overlay {
      visibility: hidden;
      opacity: 0;
      z-index: 5;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #999;
      transition: .25s;
    }
    
    .overlay-visible #site-overlay {
      visibility: visible;
      opacity: 1;
    }
    /* Dropdown */
    
    .header-categories-dropdown {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      min-height: 300px;
      padding: 15px 0;
      background: #fff;
    }
    
    li {
      padding-bottom: 15px;
      padding-left: 15px;
      padding-right: 15px;
    }
    
    .header-categories-dropdown.categories-dropdown-visible {
      visibility: visible;
      opacity: 1;
    }

JavaScript

// Overlay dropdown menu
    var menuItem = $(".header-categories-item");
    var categoriesDropdown = $(".header-categories-dropdown");
    menuItem.hover(function() {
      $(this).children(categoriesDropdown).toggleClass("categories-dropdown-visible");
            $("body").toggleClass("overlay-visible");

    });