JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <nav class="navbar navbar-top mod_navigation " itemscope="" itemtype="http://schema.org/SiteNavigationElement">
        <div class="ws-navbar-collapse pull-left">
            <ul class="nav navbar-nav">
                <li class="submenu mega ncol-3 sibling nav-item dropdown subnav">
                    <a class="" href="url" >
                        <span itemprop="name">Nav 1</span>
                    </a>

                    <div class="subnav-container submenu mega ncol_4 sibling nav-item dropdown">
                        <div class="relative">
                            <ul class="nav sub-nav level-2">
                                <li class="submenu first subnav">
                                    <a class=" " href="url" >
                                        <span itemprop="name">Sub nav 1.1</span>
                                    </a>
                                    <div class="subnav-container submenu break_4 last">
                                        <div class="relative">
                                            <ul class="nav sub-nav level-3">
                                                <li class="first">
                                                    <a class=" " href="url" >
                                                        <span itemprop="name">Sub Sub Nav</span>
                                                        <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span>        </a>
                                                </li>
                                                <li class="">
                                                    <a class=" " >
                                                        <span itemprop="name">Sub Sub Nav</span>
                                                        <span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed...

CSS

.navbar-nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    }
header .navbar.navbar-top .navbar-nav > li > .subnav-container {
    background: #000;
    position: absolute;
    top: 2.7rem;
    max-height: 0;
    min-width: 300px;
    overflow: hidden;
    -webkit-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
    }
header .navbar.navbar-top .navbar-nav li .subnav-container.mega {
    background: #fff;
    top: 70px;
    max-height: 1000px;
    min-width: 100%;
    width: 100%;
    right: 0;
    z-index: 5000;
}
header .navbar.navbar-top .navbar-nav li{
  font-size: 1.1rem;
}
header .navbar.navbar-top .navbar-nav li a {
  word-wrap: normal;
  text-transform: none;
  padding:10px;
}

  header .navbar.navbar-top .navbar-nav li .subnav-container {
    background: #fff;
    z-index: 5000;
  }
  header .navbar.navbar-top .navbar-nav li .subnav-container.mega {
    background: #fff;
    top: 70px;
    max-height:1000px;
    min-width: 100%;
    width: 100%;
    right: 0px;
    z-index: 5000;
  }
  
  header .navbar.navbar-top .navbar-nav li .subnav-container.mega, header .navbar.navbar-top .navbar-nav li .subnav-container.nav-item {
    box-shadow: 0 18px 30px 0 rgba(0, 0, 0, 0.12);
  }
  .nav.sub-nav {
    display: block;
  }
  header .navbar.navbar-top .navbar-nav li.mega .sub-nav.level-2 > li:first-child {
    margin-top: 0px;
  }
  .mega.dropdown, .dropup, .navbar, #header .container {
    position: unset;
  }
  header .navbar.navbar-top .navbar-nav li .sub-nav.level-2 li a {
    color: #000;
  }
  .navbar-top .mega ul.level-2 li {
    float: left;
    display: block;
    position: relative;
    width: 25%;
    min-height: 0;
  }
  
  .navbar-top .mega .relative {
    display: block;
    float: none;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 12px 10px 12px;
    white-space: normal;
  }
  .navbar-top .mega .relative ul.level-2 {
   ...

JavaScript

$(document).ready(function(){
$(".nav li.mega").hover(function(){
    $(this).addClass("hover");
    $(this).children(".subnav-container").addClass("hover");
},function(){
    $(this).removeClass("hover");
    $(this).children(".subnav-container").removeClass("hover");
});

var nav = $('.nav li.mega');
nav.children('.sibling').slideUp(0);
nav.click(function (e) {
    e.preventDefault();
    var ele=this;
    
    if( $(ele).children('.sibling').hasClass('open')){
      $(ele).children('.sibling').removeClass('open').slideUp(500,function(){  
      });
    }
    else
    {
    	if(nav.children('.open').length)
        {
        var child=nav.children('.open');
        	$(child).removeClass('open').slideUp(500,function(){
            	$(ele).children('.sibling').addClass('open').slideDown(500);
            });
        }
        else
        {
       $(ele).children('.sibling').addClass('open').slideDown(500);
       }
   }
});
});