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;
  }
  /* Hover dropdown */
   #nav ul li {
    position: relative;
  }
   #nav ul li a{
    color:#fff;
  }
  #nav ul li ul {
    display: none;
  }
  #nav ul li:hover ul {
    display: block;
    top: 0;
    left: -380px;
    height:100%;
  }