JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul class="main">
      <li><a href="#">Link</a></li>
      <li><a href="#">Hover Me 1</a>
      <ul>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child last</a></li>
       </ul>
     </li>
  </nav>
    
    <div class="content"></div>

CSS

html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
}

nav {
    width: 300px;
   box-sizing:border-box;
   padding:20px 0;
    height: 100%;
    background: #000;
    position: fixed;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
}

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

li {
    padding: 0;
    margin: 0;
}

.main li a {
    color: #fff;
    display: block;
    padding: 8px 20px;
}

.main li:hover {
    background: red
}

.main ul {
    display: none;
}

nav:hover {
    overflow: auto;
    background: #000;
    z-index: 1000;
}

.main li:hover ul {
    top: 0;
    padding:20px 0;
     box-sizing:border-box;
    height:100%;
    display: block;
    position: fixed;
    left: 270px;
    width: 200px;
    overflow: auto;
    bottom: 0px;
    z-index: 99;
    background:#333;
}

.content {
    margin-left: 350px;
    font-size: 30px;
}