如何用Tailwind CSS实现带连续边框的菜单及子菜单

要实现菜单按钮与子菜单边框连续的效果，核心是消除两者之间的重复边框，让边框衔接成一个整体，具体修改如下：

关键调整点 #

• 菜单按钮仅保留上、左、右边框，移除底部边框
• 子菜单仅保留下、左、右边框，移除顶部边框
• 取消子菜单与按钮的间距，让两者紧贴对齐

修改后的完整代码 #

<nav id="menu" class="hidden 950px:flex space-x-6 text-sm">
    <a href="\welcome" class="p-1 hover:text-cream">HOME</a>

    <!-- Shop Dropdown -->
    <div class="relative group">
    <button class="flex items-center p-1 hover:text-cream group-hover:text-cream group-hover:border-t group-hover:border-l group-hover:border-r">
        SHOP
        <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 w-4 h-4" viewBox="0 0 20 20" fill="white">
        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06 0L10 10.92l3.71-3.71a.75.75 0 111.06 1.06l-4 4a.75.75 0 01-1.06 0l-4-4a.75.75 0 010-1.06z" clip-rule="evenodd" />
        </svg>
    </button>
    <ul class="z-10 absolute bg-darkgray border-b border-l border-r duration-300 group-hover:opacity-100 group-hover:visible invisible left-0 mt-0 opacity-0 py-2 rounded-b shadow-lg text-white top-[25px] transition w-[215px]">
        <li><a href="\sculptures" class="block px-4 py-2 hover:bg-darkred">CHESS COLLECTION</a></li>
        <li><a href="#" class="block px-4 py-2 hover:bg-darkred">SCULPTURE COLLECTION</a></li>
    </ul>
    </div>

    <!-- Process Dropdown -->
    <div class="relative group">
    <button class="flex items-center p-1 hover:text-cream group-hover:text-cream group-hover:border-t group-hover:border-l group-hover:border-r">
        PROCESS
        <svg xmlns="http://www.w3.org/2000/svg" class="ml-1 w-4 h-4" viewBox="0 0 20 20" fill="white">
        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06 0L10 10.92l3.71-3.71a.75.75 0 111.06 1.06l-4 4a.75.75 0 01-1.06 0l-4-4a.75.75 0 010-1.06z" clip-rule="evenodd" />
        </svg>
    </button>
    <ul class="z-10 absolute bg-darkgray border-b border-l border-r duration-300 group-hover:opacity-100 group-hover:visible invisible left-0 mt-0 opacity-0 py-2 rounded-b shadow-lg text-white top-[25px] transition w-[255px]">
        <li><a href="\process" class="block px-4 py-2 hover:bg-darkred">THE PROCESS</a></li>
        <li><a href="\deconstruction" class="block px-4 py-2 hover:bg-darkred">DECONSTRUCTION & SOURCING</a></li>
    </ul>
    </div>

    <a href="#" class="p-1 hover:text-cream">RETAIL</a>
    <a href="#" class="p-1 hover:text-cream">CONTACT US</a>
</nav>

细节说明 #

1. 按钮的group-hover:border替换为group-hover:border-t group-hover:border-l group-hover:border-r，仅显示顶部、左侧、右侧边框
2. 子菜单的border替换为border-b border-l border-r，仅显示底部、左侧、右侧边框，移除顶部边框
3. 子菜单的mt-1改为mt-0，消除与按钮的间距，让边框完全衔接
4. 子菜单的rounded改为rounded-b，仅保留底部圆角，与按钮形成完整的圆角效果

内容的提问来源于stack exchange，提问作者Edward B.