JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  Top level menu
  <div class="box">
    <div class="name1">Very long submenu 1<span class="sub">▶</span></div>
    <a href="#">Item 1 1 1</a>
    <a href="#">Item 2</a>
    <div class="name2">Very long submenu 2</div>
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
  </div>
</div>

CSS

a { border: green 1px dotted; margin: 2px; }
    a, .name1, .name2 {
      display: block;
      white-space: nowrap;
    }
    .name1 > .sub {
      display: inline-block;
      float: right;
    }
    .name2:after {
      content: "▶";
      float: right;
    }

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