Make relative/absolute classes to work as expected within flex navigation

January 25, 2024

I have a navigation bar with a couple of items. Now, I need to add a third one with a drop-down menu. I already use a drop-down elsewhere, so I’m trying to reuse the same code, but I can make it display correctly. My code looks like

<body class="h-full">
  <nav class="bg-white border-b border-zinc-200">
    <div class="mx-auto max-w-8xl px-4 sm:px-6 lg:px-8">
      <div class="flex h-16 justify-between">
        <div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
          <a class="capitalize inline-flex items-center px-1 pt-1 text-sm font-medium" href="#">ONE</a>
          <a class="capitalize inline-flex items-center px-1 pt-1 text-sm font-medium" href="#">TWO</a>
          <div class="relative inline-flex items-center">
            <div class="capitalize inline-flex items-center px-1 pt-1 text-sm font-medium">
              DROPDOWN
              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path>
              </svg>
            </div>
            <div class="absolute right-0 z-10 w-32 origin-top-right rounded-md bg-white py-2 ring-1 ring-zinc-300 focus:outline-none">
              <a class="capitalize block px-3 py-1 text-sm leading-6 border-transparent text-zinc-600 hover:bg-zinc-100 hover:text-zinc-800" href="#">LINK</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</body>

You can see how the code renders here: https://play.tailwindcss.com/pwuHVaR8K2
The drop-down (lines 8 to 18) should display the links underneath the item, but, in this case, they are above it.

Without changing anything in lines 1 to 7, is there a way to make the relative/absolute classes work as expected?

>Solution :

Consider applying top: 100% via the top-full class to the absolutely-positioned element to have it start underneath the parent:

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<body class="h-full">
  <nav class="bg-white border-b border-zinc-200">
    <div class="mx-auto max-w-8xl px-4 sm:px-6 lg:px-8">
      <div class="flex h-16 justify-between">
        <div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
          <a class="capitalize inline-flex items-center px-1 pt-1 text-sm font-medium" href="#">ONE</a>
          <a class="capitalize inline-flex items-center px-1 pt-1 text-sm font-medium" href="#">TWO</a>
          <div class="relative inline-flex items-center">
            <div class="capitalize inline-flex items-center px-1 pt-1 text-sm font-medium">
              DROPDOWN
              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path>
              </svg>
            </div>
            <div class="absolute top-full right-0 z-10 w-32 origin-top-right rounded-md bg-white py-2 ring-1 ring-zinc-300 focus:outline-none" data-dropdown-target="popup">
              <a class="capitalize block px-3 py-1 text-sm leading-6 border-transparent text-zinc-600 hover:bg-zinc-100 hover:text-zinc-800" href="#">LINK</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
</body>