JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul class="menu-container">
    <li>
      Menu 1
    </li>
    <li class="with-sub">
      Menu 2
      <ul class="submenu-container menu1">
        <li>
          Submenu 1
        </li>
        <li>
          Submenu 2
        </li>
      </ul>
    </li>
    <li>
      Menu 3
      <ul class="submenu-container menu1">
        <li>
          Submenu 3
        </li>
        <li>
          Submenu 4
        </li>
        <li>
          Submenu 5
          <ul class="submenu-container menu2">
            <li>
              Subsubmenu 1
            </li>
            <li>
              Subsubmenu 2
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

CSS

* {
  margin: 0;
  padding: 0;
  box-shadow: 0;
}

nav {
  height: 2em;
}

.menu-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  align-items: center;
  background: green;
  position: relative;
  width: 100%;
}

.submenu-container {
  visibility: hidden;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  background-color: green;
}

.menu1 {
  top: 100%;
  width: 20%;
}

.menu2 {
  right: 100%;
  width: 100%;  
}

li:hover > .submenu-container {
  visibility: visible;
}

.submenu-container > li {
  display: flex;
}

li {
  list-style: none;
  padding: 0.5em;
  width: 100%;
  heigth: 100%;
  text-align: center;
}