JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<div class="menu-mega-container">
<ul id="menu-mega" class="nav-menu">
        <li><a href="#">My awesome button</a></li>
        <li class="has_children"><a href="#">My awesome button</a>
            <ul class="menu-depth-1">
                <li><a href="#">awesome link nº 1</a></li>
                <li><a href="#">awesome link nº 2</a></li>
                <li class="has_children"><a href="#">awesome link nº 3</a>
                <ul class="menu-depth-2">
                <li><a href="#">awesome link nº 1</a></li>
                <li><a href="#">awesome link nº 2</a></li>
                <li><a href="#">awesome link nº 3</a></li>
            </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</nav>
</div>

CSS

nav{position: relative;}
nav ul {
 list-style: none;
margin:0;     
padding: 0;
}

nav >div> ul > li {
  float: left;
}
nav >div> ul > li  > a:hover{
background-color: red;
}
nav#site-navigation > div > ul li  ul.menu-depth-1{
position: absolute;
background-color: green;
z-index: 500;
opacity: 0;
padding: 3px;
transition: all 0.3s ease 0s;
visibility: hidden;
margin-top:-10px;
}
nav#site-navigation > div > ul li:hover  ul.menu-depth-1 {
margin-top:0px;
opacity: 1;
visibility: visible;
}

nav#site-navigation > div ul.menu-depth-1 li.has_children > ul{
margin-top:-10px!important;
opacity: 0;

transition: all 0.3s ease 0s;
visibility: hidden;
 z-index: 500;
 
}
nav#site-navigation > div ul.menu-depth-1 li.has_children:hover > ul {
 opacity: 1;
visibility: visible;
position: absolute;
 margin-top:0px!important;
display: block;
left: 100%;
  background-color: green;
  width: auto;
  
}
nav#site-navigation > div li.has_children > ul{
  transition: all 0.3s ease 0s;
  position: absolute;
  visibility:hidden;
  margin-top:-10px;
  z-index: 500;
  opacity:0;
  background-color: green;
   padding: 3px;
}
nav#site-navigation > div li.has_children:hover > ul{
  margin-top:0px;
  visibility:visible;
  opacity:1;
}
nav#site-navigation li > ul.menu-depth-1 li:hover > ul {
 display: block;
  position: absolute;
  left: 100%;
  top: 0px;
  background-color: green;
  width: auto;
}



 nav#site-navigation li > ul ul {
visibility:hidden;
}

.has_children {
  position: relative;
}