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>
                <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>
                <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;
}
li.has_children{
  position:relative;
}
li.has_children > ul{
  transition: all 0.3s ease 0s;
  visibility:hidden;
  margin-top:-10px;
  opacity:0;
  background-color: green;
}
li.has_children:hover > ul{
  margin-top:0px;
  visibility:visible;
  opacity:1;
}
nav > div > ul> li > ul > li > ul{
  position:absolute;
  top:0;
  left:100%;
  /* You may want to add a width */
}
nav > div > ul > li {
  float: left;
}
nav >div> ul > li  > a:hover{
  background-color: red;
}