15 CSS Navigation Menu Designs 02 / 15

CSS Dropdown Navigation Menu

A multi-level dropdown navigation built entirely with CSS using the checkbox hack and `:focus-within` for accessibility.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="nav-02">
  <nav class="nav-02__bar" role="navigation">
    <div class="nav-02__logo">
      <span class="nav-02__logo-mark">
        <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
      </span>
      Vertex
    </div>
    <ul class="nav-02__links">
      <li>
        <a href="#">Products
          <svg class="nav-02__caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
        </a>
        <ul class="nav-02__dropdown nav-02__dropdown--wide">
          <li>
            <a href="#">
              <span class="nav-02__dropdown-icon"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></span>
              <span class="nav-02__dropdown-text">Dashboard<span>Analytics & insights</span></span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="nav-02__dropdown-icon"><svg viewBox="0 0 24 24"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span>
              <span class="nav-02__dropdown-text">Monitoring<span>Real-time metrics</span></span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="nav-02__dropdown-icon"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg></span>
              <span class="nav-02__dropdown-text">Teams<span>Collaboration tools</span></span>
            </a>
          </li>
          <li>
            <a href="#">
              <span class="nav-02__dropdown-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41M20 12h2M2 12H0M19.07 19.07l-1.41-1.41M5.34 5.34L3.93 3.93M12 20v2M12 2v2"/></svg></span>
              <span class="nav-02__dropdown-text">Automation<span>Workflow builder</span></span>
            </a>
          </li>
          <li class="nav-02__dropdown-cta-wrap" style="grid-column:1/-1">
            <a href="#" class="nav-02__dropdown-cta">
              Explore all products →
              <svg viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Solutions
          <svg class="nav-02__caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
        </a>
        <ul class="nav-02__dropdown">
          <li><a href="#"><span class="nav-02__dropdown-text">Enterprise</span></a></li>
          <li><a href="#"><span class="nav-02__dropdown-text">Startups</span></a></li>
          <li><a href="#"><span class="nav-02__dropdown-text">Agencies</span></a></li>
          <div class="nav-02__dropdown-divider"></div>
          <li><a href="#"><span class="nav-02__dropdown-text">Case Studies</span></a></li>
        </ul>
      </li>
      <li><a href="#">Pricing</a></li>
      <li>
        <a href="#">Resources
          <svg class="nav-02__caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
        </a>
        <ul class="nav-02__dropdown">
          <li><a href="#"><span class="nav-02__dropdown-text">Documentation</span></a></li>
          <li><a href="#"><span class="nav-02__dropdown-text">Blog</span></a></li>
          <li><a href="#"><span class="nav-02__dropdown-text">Community</span></a></li>
        </ul>
      </li>
    </ul>
    <div class="nav-02__actions">
      <a href="#" class="nav-02__btn nav-02__btn--ghost">Log in</a>
      <a href="#" class="nav-02__btn nav-02__btn--fill">Start free</a>
    </div>
  </nav>
  <div class="nav-02__hero">
    <span class="nav-02__pill"><span class="nav-02__pill-dot"></span>Hover any nav item with an arrow</span>
    <h1>CSS Dropdown Navigation Menu</h1>
    <p>Dropdowns appear on <code>:hover</code> using <code>opacity</code> + <code>translateY</code> transitions. Wide panels use CSS Grid. Zero JavaScript required.</p>
  </div>
</div>
.nav-02,.nav-02 *,.nav-02 *::before,.nav-02 *::after{box-sizing:border-box;margin:0;padding:0}
.nav-02 ::selection{background:#7c3aed;color:#fff}
.nav-02{
  --bg:#faf5ff;--surface:#ffffff;--border:#ede9fe;
  --text:#1e1b4b;--muted:#6b7280;--accent:#7c3aed;
  --accent2:#a78bfa;--shadow:rgba(124,58,237,.12);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--bg);min-height:100vh;
}
.nav-02__bar{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:0 48px;display:flex;align-items:center;
  justify-content:space-between;height:68px;
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 16px var(--shadow);
}
.nav-02__logo{
  font-size:1.25rem;font-weight:600;color:var(--text);
  letter-spacing:-.03em;display:flex;align-items:center;gap:10px;
}
.nav-02__logo-mark{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:grid;place-items:center;
}
.nav-02__logo-mark svg{width:18px;height:18px;fill:#fff}
.nav-02__links{display:flex;align-items:center;gap:2px;list-style:none}

/* top-level item */
.nav-02__links > li{position:relative}
.nav-02__links > li > a{
  display:flex;align-items:center;gap:5px;
  padding:10px 14px;color:var(--muted);
  text-decoration:none;font-size:.875rem;font-weight:500;
  border-radius:7px;transition:color .18s,background .18s;
  white-space:nowrap;
}
.nav-02__links > li > a:hover,.nav-02__links > li:hover > a{
  color:var(--text);background:var(--bg);
}
.nav-02__links > li > a .nav-02__caret{
  width:14px;height:14px;opacity:.5;
  transition:transform .22s ease;
}
.nav-02__links > li:hover > a .nav-02__caret{transform:rotate(180deg)}

/* dropdown panel */
.nav-02__dropdown{
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 12px 40px var(--shadow);
  padding:8px;
  min-width:200px;
  list-style:none;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .2s ease;
  z-index:200;
}
.nav-02__links > li:hover .nav-02__dropdown,
.nav-02__links > li:focus-within .nav-02__dropdown{
  opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav-02__dropdown li a{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;color:var(--muted);
  text-decoration:none;font-size:.875rem;font-weight:500;
  border-radius:7px;transition:background .15s,color .15s;
}
.nav-02__dropdown li a:hover{background:var(--bg);color:var(--text)}
.nav-02__dropdown-icon{
  width:32px;height:32px;border-radius:7px;
  background:var(--bg);display:grid;place-items:center;flex-shrink:0;
}
.nav-02__dropdown-icon svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2}
.nav-02__dropdown-text{display:flex;flex-direction:column;gap:1px}
.nav-02__dropdown-text span{font-size:.75rem;color:var(--accent2);font-weight:400}
.nav-02__dropdown-divider{height:1px;background:var(--border);margin:6px 8px}

/* wide dropdown */
.nav-02__dropdown--wide{min-width:480px;display:grid;grid-template-columns:1fr 1fr;gap:0}

/* cta row */
.nav-02__dropdown-cta{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#f5f3ff,#ede9fe);
  border-radius:8px;padding:12px 14px;margin-top:4px;
  font-size:.8125rem;color:var(--accent);font-weight:600;
  text-decoration:none;
}
.nav-02__dropdown-cta:hover{background:linear-gradient(135deg,#ede9fe,#ddd6fe)}
.nav-02__dropdown-cta svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2}

.nav-02__actions{display:flex;align-items:center;gap:10px}
.nav-02__btn{
  padding:8px 18px;border-radius:7px;font-size:.875rem;font-weight:600;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
  transition:all .18s;border:1.5px solid;
}
.nav-02__btn--ghost{color:var(--accent);border-color:var(--border);background:transparent}
.nav-02__btn--ghost:hover{border-color:var(--accent2);background:var(--bg)}
.nav-02__btn--fill{color:#fff;border-color:var(--accent);background:var(--accent)}
.nav-02__btn--fill:hover{opacity:.88}

/* hero */
.nav-02__hero{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:100px 24px;text-align:center;
}
.nav-02__hero h1{
  font-size:clamp(2rem,5vw,3.25rem);font-weight:600;
  color:var(--text);letter-spacing:-.03em;max-width:600px;
  margin-bottom:14px;line-height:1.2;
}
.nav-02__hero p{font-size:1rem;color:var(--muted);max-width:440px;line-height:1.65}
.nav-02__pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--accent);color:#fff;
  border-radius:100px;padding:4px 12px 4px 6px;
  font-size:.75rem;font-weight:600;margin-bottom:22px;
}
.nav-02__pill-dot{width:18px;height:18px;background:rgba(255,255,255,.25);border-radius:50%;display:grid;place-items:center}
.nav-02__pill-dot::after{content:'';width:6px;height:6px;background:#fff;border-radius:50%;display:block}

@media(max-width:700px){.nav-02__links,.nav-02__btn--ghost{display:none}}
@media(prefers-reduced-motion:reduce){
  .nav-02__dropdown,.nav-02__links > li > a .nav-02__caret{transition:none}
}

How this works

Dropdown panels are hidden with `opacity: 0; visibility: hidden; transform: translateY(-8px)`. The parent `
  • ` uses `:hover` (and `:focus-within` for keyboard access) to flip all three properties, making the panel appear to slide down from above.

    • Customize

    • Increase `min-width` on `.nav-02__dropdown` for wider panels. Add `grid` layout inside the dropdown for multi-column menus. The animation curve is `cubic-bezier(0.16, 1, 0.3, 1)` — swap for `ease-out` for a simpler feel.

    Watch out for

    • Pure CSS hover dropdowns have accessibility limitations. The `:focus-within` fallback helps keyboard users but screen readers may still struggle. For production, add `aria-expanded` toggled via a small JS enhancement.

    Browser support

    ChromeSafariFirefoxEdge
    all modern all modern all modern all modern

    More from 15 CSS Navigation Menu Designs

    CSS Navigation with Glassmorphism EffectCSS Animated Navigation Icons with LabelsCSS Multi-Level Accordion NavigationCSS Neon Glow Navigation MenuCSS Morphing Navigation Pill IndicatorCSS Sticky Navigation Bar with Scroll ShrinkCSS Navigation with Magnetic Hover EffectCSS Horizontal Navigation Bar with Hover UnderlineCSS Mega Menu NavigationCSS Hamburger Menu with Slide-Out DrawerCSS Full-Screen Overlay NavigationCSS Sidebar Navigation Menu
    View the full collection →

    Search CodeFronts

    Loading…

    ↑↓ navigate ↵ select esc close Open full search page →