JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="topMenu" role="navigation">
<div id="topMenu_nonjs" class="topNavClass">
<div id="navContainer">
<ul id="menu">
<li class="arrow" id="li1"> <a class="navLink" href="#" onClick="setTabIndex('tabSelect','1');" ><span> Menu 1</span></a>
  <div class="" id="subNav3" style="display: none;">
    <ul>
      <li id="li11"> <a href="#"> <span>Menu 1.1</span> </a> </li>
      <li class="arrow" id="li12"> <a class="nonLink" href="#"> <span>Menu 1.2 </span> </a>
      <li class="arrow"> <a class="nonLink" href="#"> <span>Menu 1.3 </span> </a>
      <li class="arrow"> <a class="nonLink" href="#"> <span>Menu 1.4 </span> </a>
      <li class="arrow"> <a class="nonLink" href="#"> <span>Menu 1.5 </span> </a>
        <div class="hide childItems3" id="navBox3">
          <div class="navBox">
            <ul class="navBoxList">
              <li id="li121"> <a class="navBoxTitle nonLink" href="#" onClick="setTabIndex('tabSelect','1');" > <span> Menu 1.2.1 </span> </a>
                <ul>
                  <li id="li1211"> <a href="#"  onClick="setTabIndex('tabSelect','1');" > <span>Menu 1.2.2</span> </a> </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</li>
<li class="arrow" id="li2"> <a class="navLink" href="#" onClick="setTabIndex('tabSelect','2');" ><span>Menu 2</span></a>
  <div class="" id="subNav3" style="display: none;">
    <ul>
      <li id="li21"> <a href="#"> <span>Menu 2.1</span> </a> </li>
      <li class="arrow" id="li22"> <a class="nonLink" href="#"> <span>Menu 2.2 </span> </a> </li>
      <li class="arrow" id="li23"> <a class="nonLink" href="#"> <span>Menu 2.3</span> </a> </li>
    </ul>
  </div>
</li>
<li class="arrow" id="li3"> <a class="navLink" href="#" onClick="setTabIndex('tabSelect','3');" ><span>Menu 3</span></a>
  <div class="" id="subNav3" style="display: none;">
    <ul>
      <li id="li31"> <a href="#"> <span>Menu 3.1</span> </a> </li>
      <li id="li32"> <a...

CSS

#topMenu_nonjs .close {
    display: none;
}
#topMenu {
    clear: both;
    height: 67px;
    position: absolute;
    z-index: 99;
    margin-top: 0px;
    margin-bottom: 1px;
    top: 50px;
    left: 141px;
}
#topMenuBtm {
    display: none;
}
#navContainer {
    padding-left: 0px;
}
/* level 1*/
    ul#menu {
    width: 100%;
    font-size: 17px;
    position: relative;
}
ul#menu li {
    display: block;
    float: left;
    color: #fff;
}
 
ul#menu li a.navLink {
    display: block;
    padding: 5px;
    color: #00a4e4;
    width: 125px;
    background: #000000;
    height: 63px;
    margin-right: 6px;
}
ul#menu li a.nonLink {
    cursor:default;
    
}
ul#menu li a.nonLink:hover {
    background: #c1c1c1 !important;
    }
    
ul#menu li a.navLink:hover {
    color: #fff;
    
}
ul#menu li.linkExtend a.navLink {
    height: 67px;
    background: #c1c1c1;
    color: #fff;
    
}
ul#menu li.tabOnActive a.navLink:hover {
    height: 67px;
}
ul#menu li a.navLink:hover {
    border-bottom:0;
    background: #c1c1c1;
    text-decoration: none;
}
ul#menu li.tabOnActive a.navLink, ul#menu li.tabOnActive a.navLink:hover {
    color: #fff;
    padding: 5px;
    margin:0;
    border: none;
    border-bottom:0;
    
    background-color: #c1c1c1;
    text-decoration: none;
    position:relative;
    float:left;
    width: 125px;
}
ul#menu li.tabOnActive {
    width: 141px;
}
ul#menu #subNav3 .navCloseContainer {
    display: block;
    margin: 257px 0 0 0;
    position: absolute;
    width: 970px;
    text-align: center;
}
ul#menu #subNav3 .navClose {
    display: block;
    margin: 0 auto;
    width: 970px;
    height: 22px;
    text-align: center;
     text-indent: -2000px;
    border-top: 1px solid #62C3E7;
}
.navLink span{
    width:100px;
    display:block;
}
/* level 2 */
ul#menu li div {
    display: block;
    left: -118px;
    top: 76px;
    margin-left: -23px;
    width: 971px;
    position: absolute;
    background: #ff0000;
    height: 390px;
    padding:...

JavaScript

$('#topMenu #menu>li').hover(function () {
         $(this).children('#subNav3').show();
         $(this).addClass('linkExtend');
          
    },
 
    function () {
         $(this).children('#subNav3').hide();
        $(this).removeClass('linkExtend');
    });
   


 

 
 $(function () {
        if ($("ul#menu").length) {
        $("ul#menu").find("li:has(div)").addClass("arrow");
        $("ul#menu li ul>li").hover(function () {
            $("div:eq(0)", this).show();
            if ($(this).children().length > 1) {
                $(this).addClass("selected")
            }
        }, 
            function () {
                    $("div:eq(0)", this).hide();
                    if ($(this).children().length > 1) {
                        $(this).removeClass("selected")
                    }
                })
            }

 });