JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav-wrapper">
  <div class="nav-inner">
    <ul class="nav">
      <li>
        <a href="#">
          Menu Item 1
        </a>
        <ul class="nav-submenu">
          <li><a href="#"><span>Sub Menu Item 1</span></a>
          <ul class="nav-subsubmenu">
            <li><a href="#"><span>SubSub Menu Item 1</span></a>
                <ul class="nav-subsubmenu">
                    <li><a href="#"><span>:) I am last</span></a></li>
                </ul>
              </li>
          </ul>
          </li>
          <li><a href="#"><span>Sub Menu Item 2</span></a></li>
          <li><a href="#"><span>Sub Menu Item 3</span></a></li>
        </ul>
      </li>
      <li>
        <a href="#">
          Menu Item 2
        </a>
        <ul class="nav-submenu">
          <li><a href="#"><span>Sub Menu Item 5</span></a></li>
          <li><a href="#"><span>Sub Menu Item 6</span></a></li>
          <li><a href="#"><span>Sub Menu Item 7</span></a></li>
        </ul>
      </li>
      <li>
       <a href="#">
         Menu Item 3
        </a>
      </li>
       <li>
        <a href="#">
          Menu Item 4
        </a>
      </li>
    </ul>
  </div>

CSS

.nav-wrapper
{
position:relative;
}
.nav-wrapper .nav-inner
{
background: #d6696b;
position: relative;
z-index: 100;
}
.nav-wrapper ul {
list-style: none;
padding: 0;
margin: 0 auto;
}
.nav-wrapper .nav {
width: 100%;
max-width: 960px;
margin: 0 auto;
list-style: none;
}

.nav > li {

display: inline-block;
padding:0 1em 0 1em;
}
.nav > li:first-child {
margin-left: 0;
}
.nav > li > a {
color: #fff;
font-size: 1em;
line-height: 3em;
display: inline-block;
position: relative;
z-index: 100;
outline: none;
text-decoration:none;
}
.nav li .nav-submenu {
position: absolute;
left: 0;
top: 100%;
width: 100%;
background:#f2f2f2;
display:none;
}

.nav li .nav-subsubmenu {
position: absolute;
left: 0;
top: 100%;
width: 100%;
background:#f2f2f2;
display:none;
}
.nav > li.nav-open
{
  background:#f2f2f2;
}

.nav > li.nav-open a
{
  color:#222;
}

.nav > li.nav-open .nav-submenu {
z-index: 1000;
display:block;
}

.nav > li.nav-open .nav-subsubmenu {
z-index: 1000;
display:block;
}

.nav li .nav-submenu li
{
  width: 24.5%;
  height:100%;
  vertical-align: top;
  border-left:1px solid #ccc;
  display:inline-block;
}

.nav li .nav-subsubmenu li
{
  width: 24.5%;
  height:100%;
  vertical-align: top;
  border-left:1px solid #ccc;
  display:inline-block;
}

.nav li .nav-submenu li:first-child {
 border-left:0px;
}

.nav li .nav-subsubmenu li:first-child {
 border-left:0px;
}

.nav li .nav-submenu li a
{
display: block;
text-align: center;
color: #222;
outline: none;
padding: 1em;
cursor:pointer;
}

@media screen and (max-width:480px) {
.nav > li {
display: block;
padding:0 1em 0 1em;
text-align:center;
}
  .nav li .nav-submenu li
{
  width: 100%;
  height:100%;
  border-left:none;
  display:block;
}
.nav li .nav-submenu {
left: 0;
top: 4em;
width: 100%;
background: #f2f2f2;
display: none;
position: static;
}
  
  .nav li .nav-subsubmenu li
{
  width: 100%;
  height:100%;
  border-left:none;
  display:block;
}
.nav li .nav-subsubmenu {
left: 0;
top: 4em;
width: 100%;
background:...

JavaScript

$(document).ready(function(){
  $('ul li a').click(function(){

     $(this).parent().find('ul').first().toggle();
      
  });
 
});