Flex导航中Relative/Absolute类调整：下拉菜单正常显示方案

你无需修改前7行代码，只需调整下拉菜单的定位类即可修复显示问题：

修改下拉菜单容器的类 #

找到下拉菜单的容器（对应原代码第14行的<div>标签），在原有类中添加top-full，让下拉菜单定位到父元素的底部下方：

<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">
  <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>

原因说明 #

原下拉菜单仅设置了水平方向的right-0定位，未指定垂直方向位置，默认会与父元素顶部对齐，导致菜单显示在按钮上方。添加top-full后，下拉菜单会被定位到父相对元素的底部边缘，刚好显示在"DROPDOWN"按钮的正下方，符合预期效果。

修改后的完整下拉菜单代码片段 #

<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">
    <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>

内容的提问来源于stack exchange，提问作者Sig