JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
 <ul class="main">
     <li><a href="">1</a>
         <ul class="sub">
             <li><a href="">1-1</a>
                 <ul class="sub">
                     <li><a href="">1-1-1</a></li>
                     <li><a href="">1-2-1</a></li>
                 </ul>
             </li>
             <li><a href="">1-2</a>
                 <ul class="sub">
                     <li><a href="">1-2-1</a></li>
                     <li><a href="">1-2-2</a></li>
                 </ul>
             </li>
         </ul>
     </li>
     <li><a href="">2</a></li>
 </ul>

CSS

.main{
    list-style: none;
    padding:0px;
    margin: 0px;
  }
  .main li{
    background-color:#f1f1f1;
    padding: 10px;
    margin: 5px;
    float:left;
    clear:both;
    position:relative;
  }
  .main li:hover{
   background-color:#d8d8d8;
  }

  .main .sub{
    display: none;
    list-style:none;
    padding-left:0;
    width:auto;
  }

.main .sub li{
    float:none;
}

.main > li:hover > .sub{
    display:block;
    position:absolute;
    top:0;
    left:100%;
}

.sub li:hover .sub{
    display:block;
    position:absolute;
    top:0;
    width:300px;
    left:100%;
}