tailwindcss实现二级下拉菜单效果代码-html代码-BFW代码库

代码语言：html

代码描述：tailwindcss实现二级下拉菜单效果代码，点击一级菜单显示二级子菜单。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  




  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.3.js"></script>
  
  
</head>

  <body class="bg-gradient-to-t from-purple-300 to-purple-100 flex flex-col gap-12 items-center justify-center min-h-screen p-4
        before:[&:has(#radio-1:checked)_#toggle-1]:scale-100
        before:[&:has(#radio-2:checked)_#toggle-2]:scale-100
        before:[&:has(#radio-3:checked)_#toggle-3]:scale-100
        before:[&:has(#radio-4:checked)_#toggle-4]:scale-100
        before:[&:has(#radio-5:checked)_#toggle-5]:scale-100
        before:[&:has(#radio-6:checked)_#toggle-6]:scale-100
        before:[&:has(#radio-7:checked)_#toggle-7]:scale-100
    ">

  <div class="bg-white/50 backdrop-blur-md ring ring-black/5 p-8 w-full max-w-5xl rounded-xl shadow-2xl shadow-purple-300 ">
    <nav class="flex flex-wrap gap-0 text-sm
                *:py-2
                *:px-4
                *:relative
                *:isolate 
                *:cursor-pointer
                *:whitespace-nowrap
                before:*:absolute
                before:*:w-full
                before:*:h-1
                before:*:left-0
                before:*:bottom-0
                before:*:bg-purple-400
                before:*:rounded-full
                before:*:transition-all
                before:*:duration-500
                before:*:ease-[cubic-bezier(.47,1.64,.38,.87)]
                before:*:scale-0
                before:*:origin-left 
                hover:before:*:scale-100
            ">
      <label id="toggle-1" for="radio-1">Furniture</label>
      <label id="toggle-2" for="radio-2">Lighting</label>
      <label id="toggle-3" for="radio-3">Decor</label>
      <label id="toggle-4" for="radio-4">Serving & Tableware</label>
      <label id="toggle-5" for="radio-5">Textiles & Carpets</label>
      <label id="toggle-6" for="radio-6">Jewelry & Accessories</label>
      <label id="toggle-7" for="radio-7">Outdoor enviroment</label>
    </nav>

    <section class="grid [grid-template-areas:'stack']  mt-8
                [&>article]:[grid-area:stack]
                [&>article]:transition-all
                [&>article]:duration-500
                [&>article>div]:scale-0
                [&>article>div]:origin-top
                [&>article>div]:transition-all
                [&>article>div]:duration-500
                [&>input:checked+article>div]:ease-[cubic-bezier(.47,1.64,.38,.87)]
                [&>input:checked+article>div]:scale-100
                [&>input:checked+article>div]:delay-500
                [&>input:checked+article>div:nth-child(2)]:delay-[800ms]
                [&>input:checked+article>div:nth-child(3)]:delay-[1100ms]
                [&>input:checked+article>div:nth-child(4)]:delay-[1400ms]
                [&>article]:grid
                [&>article]:grid-cols-1
                min-[400px]:[&>article]:grid-cols-2
                sm:[&>article]:grid-cols-4
                [&>article]:gap-4
                [&_h3]:font-medium
                [&_h3]:mb-2
                [&_h3]:text-sm
                [&_h3]:px-3

                [&_a]:font-thin
                [&_a]:text-sm
                [&_a]:py-1 
                [&_a]:px-3
                [&_a]:relative
                [&_a]:isolate 
                [&_a]:block 

                before:[&_a]:absolute
                before:[&_a]:inset-[0_100%_0_0]
                before:[&_a]:bg-gradient-to-r
                before:[&_a]:from-purple-300
                before:[&_a]:to-purple-transparent
                before:[&_a]:-z-10
                before:[&_a]:rounded-md
                before:[&_a]:transition-all
                before:[&_a]:duration-500
                before:[&_a]:ease-in-out
                hover:before:[&_a]:inset-0
            ">
      <!-- furniture -->
      <input type="radio" id="radio-1" name="panel-toggle" class="sr-only">
      <article id="panel-1">
        <div>
          <h3>Living Room</h3>
          <ul>
            <li><a href="#">Sofas</a></li>
            <li><a href="#">Coffee Tables</a></li>
            <li><a href="#">TV Stands</a></li>
            <li><a href="#">Bookshelves</a></li>
            <li><a href="#">Rugs</a></li>
            <li><a href="#">Curtains</a></li>
            <li><a href="#">Lamps</a></li>
            <li><a href="#">Wall Art</a></li>
            <li><a href="#">Chairs</a></li>
          </ul>
        </div>

        <div>
          <h3>Kitchen</h3>
          <ul>
            <li><a href="#">Cookware</a></li>
            <li><a href="#">Cutlery</a></li>
            <li><a href="#">Appliances</a></li>
            <li><a href="#">Storage Solutions</a></li>
            <li><a href="#">Dining Tables</a></li>
            <li><a href="#">Chairs</a></li>
            <li><a href="#">Kitchen Islands</a></li>
            <li><a href="#">Tableware</a></li>
          </ul>
        </div>

        <div>
          <h3>Bedroom</h3>
          <ul>
            <li><a href="#">Beds</a></li>
            <li><a href="#">Wardrobes</a></li>
            <li><a href="#">Dressers</a></li>
            <li><a href="#">Nightstands</a></li>
            <li><a href="#">Bedding</a></li>
            <li><a href="#">Mirrors</a></li>
            <li><a href="#">Lamps</a></li>
          </ul>
        </div>

        <div>
          <h3>Entrance & Hallways</h3>
          <ul>
            <li><a href="#">Console Tables</a></li>
            <li><a href="#">Coat Racks</a></li>
            <li><a href="#">Shoe Storage</a></li>
            <li><a href="#">Mirrors</a></li>
            <li&.........完整代码请登录后点击上方下载按钮下载查看