JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav" class="open-close">
  <nav role="navigation">
    <ul id="navo" class="menu nav navbar-nav">
      <li class="button"><span class="nolink">Menu</span></li>
      <li class="button"><a href="#">title one</a>
        <ul class="flyout-menu">
          <li><a href="#">section one sub-title one</a></li>
          <li><a href="#">section one sub-title two</a></li>
          <li><a href="#">section one sub-title three</a></li>
        </ul>
      </li>
      <li class="button"><a href="#">title two </a>
        <ul class="flyout-menu">
          <li><a href="#">section 2 sub-title one</a></li>
          <li><a href="#">section 2 sub-title two</a></li>
          <li><a href="#">section 2 sub-title three</a></li>
        </ul>
      </li>
      <li class="button"><a href="#">title three</a>
        <ul class="flyout-menu">
          <li><a href="#">section 3 sub-title one</a></li>
          <li><a href="#">section 3 sub-title two</a></li>
          <li><a href="#">section 3 sub-title three</a></li>
        </ul>
      </li>
      <li class="button"><a href="#">title four</a>
        <ul class="flyout-menu">
          <li><a href="#">sub-title one</a></li>
        </ul>
      </li>
      <li class="button"><a href="#">title five</a>
        <ul class="flyout-menu">
          <li><a href="#">section five sub-title one</a></li>
          <li><a href="#">section five sub-title two</a></li>
          <li><a href="#">section five sub-title three</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

CSS

#nav .opener {
  display: none;
}

ul li {
  list-style-type: none;
  list-style-image: none;
}

#nav {
  width: 600px;
  position: fixed;
  top: 0;
  right: 0;
  padding-top: 0px;
  z-index: 9999;
  height: 100%;
}

#nav ul {
  background: #4f626b;
  width: 300px;
  height: 100%;
  position: absolute;
  right: 0px;
  margin-top: 0px;
  z-index: 999999;
  padding: 0;
}


/* Hover dropdown */

#nav ul li {
  /* position: relative; */
  padding-left: 40px; 
}

#nav ul li a {
  color: #fff;
}

#nav ul li ul {
  display: none;
}

#nav ul li:hover ul {
  display: block;
  top: 0;
  left: -100%; 
  height: auto; 
}