JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="menu">
  <li>Abra
     <ul>
      <li>Amfdf rt</li>
      <li>Brr zz</li>
     </ul>
  </li>
  <li>Kadabra
     <ul>
      <li>Kala mala</li>
      <li>Hauki dauki</li>
     </ul>
  </li>
  <li>Simsalabim
    <ul>
      <li>Dudel didel</li>
      <li>Dudel döh</li>
      <li>Labedi bap</li>
    </ul>
  </li>
</ul>

CSS

.menu,
.menu ul {
  background-color: tan;
}
.menu > li {
  display: inline-block;
  white-space: nowrap;
}
.menu ul {
  position: absolute;
  display: none;  
}
.menu > li:hover {
  position: relative;
}
.menu > li:hover ul {
  display: block;
}