22 Tailwind Dropdown Menus
11 / 22

All 22 in 22 Tailwind Dropdown Menus

  1. 01Tailwind Slide-Down Fade Dropdown Menu
  2. 02Tailwind Clip-Path Curtain Reveal Dropdown
  3. 03Tailwind 3D Perspective Flip Dropdown
  4. 04Tailwind Elastic Bounce Dropdown Menu
  5. 05Tailwind Glassmorphism Float Panel Dropdown
  6. 06Tailwind Stagger Children Reveal Dropdown
  7. 07Tailwind Mega Menu Grid Dropdown
  8. 08Tailwind Underline Nav Fade Panel Dropdown
  9. 09Tailwind Details Summary Native Dropdown
  10. 10Tailwind Checkbox Hack Mobile Nav Dropdown
  11. 11Tailwind Nested Multi-Level Dropdown
  12. 12Tailwind Icon Sidebar Flyout Dropdown
  13. 13Tailwind Split-Screen Mega Menu Dropdown
  14. 14Tailwind Segmented Pill Nav Dropdown
  15. 15Tailwind Color Swatch Picker Dropdown
  16. 16Tailwind Right-Click Context Menu Dropdown
  17. 17Tailwind Keyboard Accessible ARIA Dropdown
  18. 18Tailwind Stagger Blur Entrance Dropdown
  19. 19Tailwind Command Palette Search Dropdown
  20. 20Tailwind Autocomplete Suggestion Dropdown
  21. 21Tailwind Tab Panel Dropdown
  22. 22Tailwind Custom Animated Select Dropdown
Pure TailwindMIT licensed

Tailwind Nested Multi-Level Dropdown

Three levels deep, each submenu flying out to the right of its parent — and the demo that makes named groups indispensable. group/l1, group/l2, group/l3 keep each level's hover from leaking into its children, which is exactly the bug the CSS version fights with > combinators.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="tdd-11 w-full min-h-svh grid justify-center content-start bg-linear-[135deg,var(--color-tdd11-bg1),var(--color-tdd11-bg2)] font-tdd11-sans text-tdd11-ink px-5 py-8" aria-label="Nested multi-level dropdown demo">
  <nav class="relative z-10" aria-label="Primary">
    <ul class="flex list-none gap-0.5 rounded-xl border border-tdd11-edge bg-white p-1.5 shadow-[0_4px_20px_oklch(0_0_0/0.07)]">
      <li class="relative">
        <a href="#home" class="flex items-center justify-between gap-2 whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-semibold text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Home</a>
      </li>
      <li class="group/l1 relative after:absolute after:inset-x-0 after:top-full after:h-2 after:content-['']">
        <a href="#products" class="flex items-center justify-between gap-2 whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-semibold text-tdd11-ink no-underline transition-colors duration-150 after:text-[11px] after:text-tdd11-mut after:content-['\2304'] hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Products</a>
        <ul class="pointer-events-none absolute top-[calc(100%+8px)] left-0 z-10 flex min-w-42 -translate-y-1 list-none flex-col gap-px rounded-[10px] border border-tdd11-edge bg-white p-1.5 opacity-0 shadow-[0_8px_32px_oklch(0_0_0/0.12)] transition-[opacity,translate] duration-200 group-hover/l1:pointer-events-auto group-hover/l1:translate-y-0 group-hover/l1:opacity-100 group-focus-within/l1:pointer-events-auto group-focus-within/l1:translate-y-0 group-focus-within/l1:opacity-100">
          <li class="group/l2 relative after:absolute after:inset-y-0 after:left-full after:w-2.5 after:content-['']">
            <a href="#software" class="flex items-center justify-between gap-2 whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 after:ml-auto after:text-sm after:text-tdd11-mut after:content-['\203A'] hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Software</a>
            <ul class="pointer-events-none absolute -top-1.5 left-[calc(100%+10px)] z-20 flex min-w-42 translate-x-1 list-none flex-col gap-px rounded-[10px] border border-tdd11-edge bg-white p-1.5 opacity-0 shadow-[0_8px_32px_oklch(0_0_0/0.14)] transition-[opacity,translate] duration-200 group-hover/l2:pointer-events-auto group-hover/l2:translate-x-0 group-hover/l2:opacity-100 group-focus-within/l2:pointer-events-auto group-focus-within/l2:translate-x-0 group-focus-within/l2:opacity-100">
              <li><a href="#web-app" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Web App</a></li>
              <li><a href="#desktop" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Desktop</a></li>
              <li><a href="#mobile" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Mobile</a></li>
            </ul>
          </li>
          <li class="group/l2 relative after:absolute after:inset-y-0 after:left-full after:w-2.5 after:content-['']">
            <a href="#hardware" class="flex items-center justify-between gap-2 whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 after:ml-auto after:text-sm after:text-tdd11-mut after:content-['\203A'] hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Hardware</a>
            <ul class="pointer-events-none absolute -top-1.5 left-[calc(100%+10px)] z-20 flex min-w-42 translate-x-1 list-none flex-col gap-px rounded-[10px] border border-tdd11-edge bg-white p-1.5 opacity-0 shadow-[0_8px_32px_oklch(0_0_0/0.14)] transition-[opacity,translate] duration-200 group-hover/l2:pointer-events-auto group-hover/l2:translate-x-0 group-hover/l2:opacity-100 group-focus-within/l2:pointer-events-auto group-focus-within/l2:translate-x-0 group-focus-within/l2:opacity-100">
              <li><a href="#devices" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Devices</a></li>
              <li><a href="#accessories" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Accessories</a></li>
            </ul>
          </li>
          <li><a href="#services" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Services</a></li>
        </ul>
      </li>
      <li class="group/l1 relative after:absolute after:inset-x-0 after:top-full after:h-2 after:content-['']">
        <a href="#company" class="flex items-center justify-between gap-2 whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-semibold text-tdd11-ink no-underline transition-colors duration-150 after:text-[11px] after:text-tdd11-mut after:content-['\2304'] hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Company</a>
        <ul class="pointer-events-none absolute top-[calc(100%+8px)] left-0 z-10 flex min-w-42 -translate-y-1 list-none flex-col gap-px rounded-[10px] border border-tdd11-edge bg-white p-1.5 opacity-0 shadow-[0_8px_32px_oklch(0_0_0/0.12)] transition-[opacity,translate] duration-200 group-hover/l1:pointer-events-auto group-hover/l1:translate-y-0 group-hover/l1:opacity-100 group-focus-within/l1:pointer-events-auto group-focus-within/l1:translate-y-0 group-focus-within/l1:opacity-100">
          <li><a href="#about" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">About</a></li>
          <li><a href="#careers" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Careers</a></li>
          <li class="group/l2 relative after:absolute after:inset-y-0 after:left-full after:w-2.5 after:content-['']">
            <a href="#press" class="flex items-center justify-between gap-2 whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 after:ml-auto after:text-sm after:text-tdd11-mut after:content-['\203A'] hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Press</a>
            <ul class="pointer-events-none absolute -top-1.5 left-[calc(100%+10px)] z-20 flex min-w-42 translate-x-1 list-none flex-col gap-px rounded-[10px] border border-tdd11-edge bg-white p-1.5 opacity-0 shadow-[0_8px_32px_oklch(0_0_0/0.14)] transition-[opacity,translate] duration-200 group-hover/l2:pointer-events-auto group-hover/l2:translate-x-0 group-hover/l2:opacity-100 group-focus-within/l2:pointer-events-auto group-focus-within/l2:translate-x-0 group-focus-within/l2:opacity-100">
              <li><a href="#news" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">News</a></li>
              <li><a href="#media-kit" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Media Kit</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="relative"><a href="#contact" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-semibold text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Contact</a></li>
    </ul>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-tdd11-bg1: #eff6ff;
  --color-tdd11-bg1: oklch(0.97 0.02 250);
  --color-tdd11-bg2: #e0e7ff;
  --color-tdd11-bg2: oklch(0.92 0.04 275);
  --color-tdd11-ink: #1e293b;
  --color-tdd11-ink: oklch(0.28 0.03 260);
  --color-tdd11-mut: #64748b;
  --color-tdd11-mut: oklch(0.55 0.03 255);
  --color-tdd11-edge: #e2e8f0;
  --color-tdd11-edge: oklch(0.92 0.01 255);
  --color-tdd11-tint: #eff6ff;
  --color-tdd11-tint: oklch(0.97 0.02 250);
  --color-tdd11-acc: #1d4ed8;
  --color-tdd11-acc: oklch(0.48 0.2 264);
  --font-tdd11-sans: 'Manrope', system-ui, sans-serif;
}

.tdd-11 {
  width: 100%;
  min-height: 100svh;
}

.tdd-11 ::selection {
  background: var(--color-tdd11-acc);
  color: #eff6ff;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tdd11-bg1: #eff6ff;
  --color-tdd11-bg1: oklch(0.97 0.02 250);
  --color-tdd11-bg2: #e0e7ff;
  --color-tdd11-bg2: oklch(0.92 0.04 275);
  --color-tdd11-ink: #1e293b;
  --color-tdd11-ink: oklch(0.28 0.03 260);
  --color-tdd11-mut: #64748b;
  --color-tdd11-mut: oklch(0.55 0.03 255);
  --color-tdd11-edge: #e2e8f0;
  --color-tdd11-edge: oklch(0.92 0.01 255);
  --color-tdd11-tint: #eff6ff;
  --color-tdd11-tint: oklch(0.97 0.02 250);
  --color-tdd11-acc: #1d4ed8;
  --color-tdd11-acc: oklch(0.48 0.2 264);
  --font-tdd11-sans: 'Manrope', system-ui, sans-serif;
}

.tdd-11 {
  width: 100%;
  min-height: 100svh;
}

.tdd-11 ::selection {
  background: var(--color-tdd11-acc);
  color: #eff6ff;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • Named groups are the entire reason this demo ports cleanly: group-hover/l2: is the utility equivalent of the CSS version's > combinator discipline.
  • The chevrons are after:content-['\203A'] rather than glyphs in the markup, so the indicator belongs to the styling of "has children", not to the label text.
  • Both bridge directions are expressed as after: utilities on the <li>, which puts them on the element that actually owns the hover.
  • Escalating z-index per level is three utilities; in CSS it was a documented gotcha with no enforcement.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Nested Multi-Level Dropdown
Source: https://codefronts.com/navigation/tailwind-dropdown-menus/tailwind-nested-multi-level-dropdown/

Three levels deep, each submenu flying out to the right of its parent — and the demo that makes named groups indispensable. group/l1, group/l2, group/l3 keep each level's hover from leaking into its children, which is exactly the bug the CSS version fights with > combinators.
## HTML
```html
<section class="tdd-11 w-full min-h-svh grid justify-center content-start bg-linear-[135deg,var(--color-tdd11-bg1),var(--color-tdd11-bg2)] font-tdd11-sans text-tdd11-ink px-5 py-8" aria-label="Nested multi-level dropdown demo">
  <nav class="relative z-10" aria-label="Primary">
    <ul class="flex list-none gap-0.5 rounded-xl border border-tdd11-edge bg-white p-1.5 shadow-[0_4px_20px_oklch(0_0_0/0.07)]">
      <li class="relative">
        <a href="#home" class="flex items-center justify-between gap-2 whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-semibold text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Home</a>
      </li>
      <li class="group/l1 relative after:absolute after:inset-x-0 after:top-full after:h-2 after:content-['']">
        <a href="#products" class="flex items-center justify-between gap-2 whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-semibold text-tdd11-ink no-underline transition-colors duration-150 after:text-[11px] after:text-tdd11-mut after:content-['\2304'] hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Products</a>
        <ul class="pointer-events-none absolute top-[calc(100%+8px)] left-0 z-10 flex min-w-42 -translate-y-1 list-none flex-col gap-px rounded-[10px] border border-tdd11-edge bg-white p-1.5 opacity-0 shadow-[0_8px_32px_oklch(0_0_0/0.12)] transition-[opacity,translate] duration-200 group-hover/l1:pointer-events-auto group-hover/l1:translate-y-0 group-hover/l1:opacity-100 group-focus-within/l1:pointer-events-auto group-focus-within/l1:translate-y-0 group-focus-within/l1:opacity-100">
          <li class="group/l2 relative after:absolute after:inset-y-0 after:left-full after:w-2.5 after:content-['']">
            <a href="#software" class="flex items-center justify-between gap-2 whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 after:ml-auto after:text-sm after:text-tdd11-mut after:content-['\203A'] hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Software</a>
            <ul class="pointer-events-none absolute -top-1.5 left-[calc(100%+10px)] z-20 flex min-w-42 translate-x-1 list-none flex-col gap-px rounded-[10px] border border-tdd11-edge bg-white p-1.5 opacity-0 shadow-[0_8px_32px_oklch(0_0_0/0.14)] transition-[opacity,translate] duration-200 group-hover/l2:pointer-events-auto group-hover/l2:translate-x-0 group-hover/l2:opacity-100 group-focus-within/l2:pointer-events-auto group-focus-within/l2:translate-x-0 group-focus-within/l2:opacity-100">
              <li><a href="#web-app" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Web App</a></li>
              <li><a href="#desktop" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Desktop</a></li>
              <li><a href="#mobile" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Mobile</a></li>
            </ul>
          </li>
          <li class="group/l2 relative after:absolute after:inset-y-0 after:left-full after:w-2.5 after:content-['']">
            <a href="#hardware" class="flex items-center justify-between gap-2 whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 after:ml-auto after:text-sm after:text-tdd11-mut after:content-['\203A'] hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Hardware</a>
            <ul class="pointer-events-none absolute -top-1.5 left-[calc(100%+10px)] z-20 flex min-w-42 translate-x-1 list-none flex-col gap-px rounded-[10px] border border-tdd11-edge bg-white p-1.5 opacity-0 shadow-[0_8px_32px_oklch(0_0_0/0.14)] transition-[opacity,translate] duration-200 group-hover/l2:pointer-events-auto group-hover/l2:translate-x-0 group-hover/l2:opacity-100 group-focus-within/l2:pointer-events-auto group-focus-within/l2:translate-x-0 group-focus-within/l2:opacity-100">
              <li><a href="#devices" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Devices</a></li>
              <li><a href="#accessories" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Accessories</a></li>
            </ul>
          </li>
          <li><a href="#services" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Services</a></li>
        </ul>
      </li>
      <li class="group/l1 relative after:absolute after:inset-x-0 after:top-full after:h-2 after:content-['']">
        <a href="#company" class="flex items-center justify-between gap-2 whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-semibold text-tdd11-ink no-underline transition-colors duration-150 after:text-[11px] after:text-tdd11-mut after:content-['\2304'] hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Company</a>
        <ul class="pointer-events-none absolute top-[calc(100%+8px)] left-0 z-10 flex min-w-42 -translate-y-1 list-none flex-col gap-px rounded-[10px] border border-tdd11-edge bg-white p-1.5 opacity-0 shadow-[0_8px_32px_oklch(0_0_0/0.12)] transition-[opacity,translate] duration-200 group-hover/l1:pointer-events-auto group-hover/l1:translate-y-0 group-hover/l1:opacity-100 group-focus-within/l1:pointer-events-auto group-focus-within/l1:translate-y-0 group-focus-within/l1:opacity-100">
          <li><a href="#about" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">About</a></li>
          <li><a href="#careers" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Careers</a></li>
          <li class="group/l2 relative after:absolute after:inset-y-0 after:left-full after:w-2.5 after:content-['']">
            <a href="#press" class="flex items-center justify-between gap-2 whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 after:ml-auto after:text-sm after:text-tdd11-mut after:content-['\203A'] hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Press</a>
            <ul class="pointer-events-none absolute -top-1.5 left-[calc(100%+10px)] z-20 flex min-w-42 translate-x-1 list-none flex-col gap-px rounded-[10px] border border-tdd11-edge bg-white p-1.5 opacity-0 shadow-[0_8px_32px_oklch(0_0_0/0.14)] transition-[opacity,translate] duration-200 group-hover/l2:pointer-events-auto group-hover/l2:translate-x-0 group-hover/l2:opacity-100 group-focus-within/l2:pointer-events-auto group-focus-within/l2:translate-x-0 group-focus-within/l2:opacity-100">
              <li><a href="#news" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">News</a></li>
              <li><a href="#media-kit" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-medium text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Media Kit</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="relative"><a href="#contact" class="block whitespace-nowrap rounded-lg px-3.5 py-2.5 text-[13.5px] font-semibold text-tdd11-ink no-underline transition-colors duration-150 hover:bg-tdd11-tint hover:text-tdd11-acc focus-visible:bg-tdd11-tint focus-visible:outline-none">Contact</a></li>
    </ul>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tdd11-bg1: #eff6ff;
  --color-tdd11-bg1: oklch(0.97 0.02 250);
  --color-tdd11-bg2: #e0e7ff;
  --color-tdd11-bg2: oklch(0.92 0.04 275);
  --color-tdd11-ink: #1e293b;
  --color-tdd11-ink: oklch(0.28 0.03 260);
  --color-tdd11-mut: #64748b;
  --color-tdd11-mut: oklch(0.55 0.03 255);
  --color-tdd11-edge: #e2e8f0;
  --color-tdd11-edge: oklch(0.92 0.01 255);
  --color-tdd11-tint: #eff6ff;
  --color-tdd11-tint: oklch(0.97 0.02 250);
  --color-tdd11-acc: #1d4ed8;
  --color-tdd11-acc: oklch(0.48 0.2 264);
  --font-tdd11-sans: 'Manrope', system-ui, sans-serif;
}

.tdd-11 {
  width: 100%;
  min-height: 100svh;
}

.tdd-11 ::selection {
  background: var(--color-tdd11-acc);
  color: #eff6ff;
}
```

How this works

Unnamed groups nest badly. With three plain groups, hovering the outer item matches group-hover: on every descendant panel and all three levels open at once. Naming them scopes each variant to its own level:

<li class="group/l2 relative">
  <ul class="opacity-0 group-hover/l2:opacity-100">

Direction changes with depth. The root list is horizontal so its panels drop; every deeper list is vertical so its panels fly right. Two position class lists, applied by level.

Bridges change direction too — a vertical strip on the right edge for fly-outs, a horizontal strip below for the root drop. Both live on the <li>, because the closed panel is pointer-events-none and cannot bridge for itself.

Depth is a stacking problem as much as a layout one, which is why each level bumps its z-.

Make it yours

  • Flip a level leftwards near the viewport edge: swap left-full for right-full on that <ul>.
  • Deepen the shadow per level (shadow-lg → shadow-xl → shadow-2xl) to reinforce the stack.
  • Widen the bridge to after:w-4 if testers report the submenu closing on diagonal mouse paths.
  • Two levels is the usability ceiling; the third exists here to prove the pattern scales, not to recommend it.

Gotchas — read before shipping

  • Plain group inside group is the bug this demo exists to show — name every level.
  • Each nested panel needs a higher z- than its parent, or it renders behind its own sibling list.
  • Diagonal mouse travel is the classic fly-out failure; the side bridge is mandatory, not decorative.
  • Nested hover menus have no touch story at all. On small screens collapse this to an accordion.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Nested hover selectors are universally supported; named groups compile to plain class selectors.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transitionstw ↗

Theme tokensset in @theme, used by a utility

oklch()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →