<body>
  <div class="relative w-20 group bg-red-100">
    <div>
      Menu
    </div>
    <div class="absolute w-20 invisible group-hover:visible bg-green-100">
      <div>Item1</div>
        <div class="relative group2 bg-red-100">
          <div>
            Menu
          </div>
          <div class="absolute w-20 top-0 left-20 invisible group2-hover:visible bg-green-100">
            <div>Item1</div>
            <div>Item2</div>
            <div>Item3</div>
          </div>
        </div>
      <div>Item3</div>
    </div>
  </div>
</body>

.group:hover .group-hover\:visible {
  visibility: visible;
}

.group2:hover .group2-hover\:visible {
  visibility: visible;
}

.left-20 {
  left: 5rem;
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.