JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="menu">
  <div class="list">
    <span class="item">
      <a href="#">link1</a>
      <div class="list">
        <span class="item">
          <a href="#">link11</a>
        </span>
        <span class="item">
          <a href="#">link12</a>
        </span>
      </div>
    </span>
    <span class="item">
      <a href="#">link2</a>
      <div class="list">
        <span class="item">
          <a href="#">link21</a>
        </span>
      </div>
    </span>
  </div>
</nav>

CSS

.menu{position:relative;display:inline-block;}
.menu .list{display:none;}
.menu .item{display:block;}
.menu .item:hover>.list{display:block;position:absolute;left:100%;top:0;}
.menu>.list{display:block;}