JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
                <ul class="nav-ul">
                    <a href="#">
                        <li class="" rel="pay1" data-target="home">Home</li>
                    </a>
                    <li rel="pay2" data-target="apply">About</li>
                    <li rel="pay3">Contact</li>
                </ul>
                <div class="substitute">
                    <div id="pay2" class="sub-child">
                        <ul>
                            <a href="#">
                                <li>History</li>
                            </a>
                            <li class="ignore">·</li>
                            <a href="#">
                                <li>Operations</li>
                            </a>
                        </ul>
                    </div>
                    <div id="pay3" class="sub-child">
                        <ul>
                            <li>Paulette</li>
                            <li class="ignore">·</li>
                            <li>Jared</li>
                            <li class="ignore">·</li>
                            <li>Christine</li>
                        </ul>
                    </div>
                </div>
                <!--end substitute-->
            </div>

CSS

#nav {
    float: left;
}
#nav .nav-ul {
  list-style: none;
  float: left;
  background-color: /*yellow*/;
  /*border-right: solid 2px #000000;*/
}
#nav .nav-ul li {
  float: left;
  padding: 20px;
  font-weight: bold;
  color: #000000;
  font-family: "GothamBold", Arial;
  font-size: 13px;
  background-color:;
}
#nav .nav-ul li:hover {
  cursor: pointer;
  background-color: #4c4c4c;
  color: #ffffff;
  transition: .4s;
}
#nav .nav-ul li.detected {
  color: #ffffff;
  background-color: #000000;
}
a:-webkit-any-link {
	color: #000000;
}
#nav .substitute {
  float: left;
  background-color:;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
#nav .substitute .sub-child {
  float: left;
  display: none;
  background-color:;
}
#nav .substitute .sub-child.active {
  display: block;
}
#nav .substitute .sub-child ul {
  list-style: none;
}
#nav .substitute .sub-child ul li {
  float: left;
    font-family: "GothamBold", Arial;
    font-size: 13px;
    font-style: italic;
    font-weight: bold;
    margin-left: 10px;
}
#nav .substitute .sub-child ul li:hover {
    cursor: pointer;
    color: #4c4c4c;
    transition: .4s;
}
#nav .substitute .sub-child ul li.ignore {
    cursor: default;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
#nav .substitute .sub-child ul li.ignore:hover {
    color: #000000;
}

JavaScript

$(function() {

  function animate(e) {
    e.stopPropagation();
    //$('#nav .nav-ul li').off('click', animate)
    var $detected = $(this).closest('.nav-ul');
    $detected.find('li.detected').removeClass('detected');
    $(this).addClass('detected');

    //figure out which rel to show
    var ulToShow = $(this).attr('rel');

    //hide current rel
    if ($('.substitute .sub-child.active').length > 0) {
    console.log("A");
      $('.substitute .sub-child.active').hide(700, function() {
        $(this).removeClass('active');
        $('#' + ulToShow).fadeIn(528, function() {
          $(this).addClass('active');
          //$('#nav .nav-ul li').on('click', animate)

        });
      });
    } else {
    console.log("B");
      $('#' + ulToShow).fadeIn(528, function() {
        $(this).addClass('active');
        //$('#nav .nav-ul li').on('click', animate)
      });
    }
  }

  $('#nav .nav-ul li').on('click', animate);
  
  // close menu when clicking anywhere on the page
  $(document).on("click", function() {
    $("#nav li.detected").removeClass("detected");
    $("#nav div.active").hide(700, function() { $(this).removeClass("active"); });
  });
});