htmlcsstailwind-css

Make a menu with submenus with continuous border around them using Tailwind Css

I am trying to make a menu with the submenus that will have a continuous border around them. The code below shows how to make a border for each individual menu and submenu but there are borders dividing them.

<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">
        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 duration-300 group-hover:opacity-100 group-hover:visible invisible left-0 mt-1 opacity-0 py-2 rounded 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">
        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 duration-300 group-hover:opacity-100 group-hover:visible invisible left-0 mt-1 opacity-0 py-2 rounded 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>

As you can see, the top menu border and the submenu border need not to be there but I want something that looks like the picture. enter image description here

Solution

  • Remove the bottom border from the <button> elements:

    <button class="… group-hover:border-b-0">

    Add a opaque background color to the <button> elements. This will act to hide the portion of the sub-menu's top border:

    <button class="… bg-[steelblue]">

    Ensure the <button> elements are stacked on top of the sub-menus:

    <button class="… relative z-20">

    Move the sub-menu elements up by one pixel so that the top border gets hidden by the aforementioned <button> elements:

    <ul class="… -translate-y-px">

    Remove the top-left corner rounding so that the left edge looks more seamless:

    <ul class="… rounded-tl-none">


    tailwind.config = {
  theme: {
    extend: {
      colors: {
        cream: 'Moccasin',
        darkgray: 'darkgray',
        darkred: 'darkred',
      },
    },
    screens: {
      '950px': '1px',
    },
  },
};
    body {
  background-color: steelblue;
}
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>

<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 group-hover:border-b-0 bg-[steelblue] relative z-20">
      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 duration-300 group-hover:opacity-100 group-hover:visible invisible left-0 mt-1 opacity-0 py-2 rounded shadow-lg text-white top-[25px] transition w-[215px] -translate-y-px rounded-tl-none">
      <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 group-hover:border-b-0 bg-[steelblue] relative z-20">
      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 duration-300 group-hover:opacity-100 group-hover:visible invisible left-0 mt-1 opacity-0 py-2 rounded shadow-lg text-white top-[25px] transition w-[255px] -translate-y-px rounded-tl-none">
      <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>