How to get a hoverable (bottom) navigation menu in TailwindCSS

I am trying to build a horizontal bottom menu navbar in TailwindCSS that shows an appropriate div item right above it.

The div item should be the same width as the navbar, and aligned with it.

Desired effect on hover: https://nl.pinterest.com/pin/615093261639733146/

I have the following minimalist code that shows the effect:

<div class="bg-red-50 w-full h-64">Some stuff above the menu div</div>
  
<div class="grid grid-cols-3 h-10 w-96 bg-red-50 mt-4 mx-auto relative">
    <div class="peer/menu1 cursor-pointer bg-yellow-50 w-32">
      Menu 1
    </div>
    <div class="peer/menu2 cursor-pointer bg-blue-200 w-32">
      Menu 2
    </div>
    <div class="peer/menu3 cursor-pointer bg-green-100 w-32">
      Menu 3
    </div>
    <div class="invisible absolute z-50 peer-hover/menu2:visible col-span-3 bottom-10 p-4 bg-gray-100 w-full">
      <p>Menu items 2</p>
      <p>Some more text</p>
    </div>
    <div class="invisible absolute z-50 peer-hover/menu3:visible col-span-3 bottom-10 p-4 bg-gray-100 w-full">
      <p>Menu items 3</p>
      <button class="px-2 py-1 rounded-lg m-2 bg-red-50">Button</button>
      <p>Some more text</p>
    </div>
</div>

Tailwind Play link for the code above: https://play.tailwindcss.com/Mi3hHFFEdw

The problem: as soon as I try to enter the div that shows up after e.g. hovering over menu 3, the div disappears…

You need to sign in to view this answers