代码之家 › 专栏 › 技术社区 › Edward B.

使用Tailwind Css制作一个包含子菜单的菜单,子菜单周围有连续的边框

tailwind-css css html

Edward B. · 技术社区 · 10 月前

我正试图制作一个菜单,其中的子菜单周围有一个连续的边框。下面的代码显示了如何为每个单独的菜单和子菜单制作边框,但它们之间有边框。

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

正如你所看到的,顶部菜单边框和子菜单边框不需要在那里,但我想要一些看起来像图片的东西。

1 回复 | 直到 10 月前

Wongjn 10 月前

从中删除底部边框 <button> 元素:

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

为添加不透明的背景颜色 <按钮> 元素。这将隐藏子菜单顶部边框的部分:

<button class="â¦ bg-[steelblue]">

确保 <按钮> 元素堆叠在子菜单的顶部:

<button class="â¦ relative z-20">

将子菜单元素向上移动一个像素,使顶部边框被上述内容隐藏 <按钮> 元素:

<ul class="â¦ -translate-y-px">

删除左上角圆角,使左边缘看起来更无缝:

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