JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  Top level menu (hover on me)
  <div class="box">
    <div class="submenu">
      <div class="name">Long submenu 1</div>
      <div class="box">        
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
      </div>
    </div>
    <a href="#">Item 1 1 1</a>
    <a href="#">Item 2</a>
    <div class="submenu">
      <div class="name">Very long submenu 2</div>
      <div class="box">        
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
      </div>
    </div>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
  </div>
</div>

CSS

.container {
        display: inline-block;
        background: gold;
        position: relative;
    }
    .box { display: none; }
    .container:hover > .box {
      display: block;
      position: absolute;
      top: 100%;
    }
    .container .submenu {
      position: relative;
    }
    .container .submenu:hover > .box {
      display: block;
      position: absolute;
      top: 0;
      left: 100%;
    }

    a, .name {
      white-space: nowrap;
      display: block;
    }
    .name {
      padding-right: 1.2em;
      position: relative;
    }
    .name:after {
      content: "â–¶";
      position: absolute;
      top: 0;
      left: 100%;
      margin-left: -1em;
    }