JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
  <ul>
    <li>
      <a>menu1</a>
    </li>
    <li>
      <a>menu2></a>
      <div class="submenu">
        <ul>
          <li>
            <a>menu21</a>
          </li>
          <li>
            <a>menu22></a>
            <div class="submenu">
              <ul>
                <li>
                  <a>menu111</a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a>menu23</a>
          </li>
          <li>
            <a>menu24</a>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <a>menu3</a>
    </li>
    <li>
      <a>menu4</a>
    </li>
    <li>
      <a>menu5</a>
    </li>
    <li>
      <a>menu6</a>
    </li>
  </ul>
</div>

CSS

ul{
  list-style-type: none;
  padding:0;
  margin:0;
  background:#777;
  overflow:auto;
  width:100px;
  height:50px;
}
li{
  #position:relative;
}
li>a{
  cursor:pointer;
}
.submenu{
  display:none;
  position:fixed;
}
.submenu>ul{
  position:absolute;
  top:-20px;
  left:80px;
}
.menu li:hover>.submenu{
  display:block;
}