11 CSS Header Designs 10 / 11

Multi-Level Dropdown Menu Header

A three-level nested dropdown built from semantic ul/li/ul markup.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="csh-10">
  <header class="csh-10__header">
    <div class="csh-10__bar">
      <a href="#" class="csh-10__logo">The <em>Gazette</em></a>
      <nav class="csh-10__nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li>
            <a href="#">Sections <svg class="csh-10__chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg></a>
            <ul>
              <li>
                <a href="#">Culture <svg class="csh-10__chev csh-10__chev--side" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg></a>
                <ul>
                  <li><a href="#">Film<small>23 stories</small></a></li>
                  <li><a href="#">Music<small>14 stories</small></a></li>
                  <li><a href="#">Books<small>31 stories</small></a></li>
                </ul>
              </li>
              <li>
                <a href="#">Politics <svg class="csh-10__chev csh-10__chev--side" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg></a>
                <ul>
                  <li><a href="#">Elections<small>Live</small></a></li>
                  <li><a href="#">Policy<small>Weekly</small></a></li>
                </ul>
              </li>
              <li><a href="#">Science<small>New</small></a></li>
            </ul>
          </li>
          <li>
            <a href="#">Archive <svg class="csh-10__chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg></a>
            <ul>
              <li><a href="#">2029<small>Vol. XII</small></a></li>
              <li><a href="#">2028<small>Vol. XI</small></a></li>
              <li><a href="#">Earlier<small>Index</small></a></li>
            </ul>
          </li>
          <li><a href="#">About</a></li>
        </ul>
      </nav>
      <a href="#" class="csh-10__cta">Subscribe</a>
    </div>
  </header>

  <section class="csh-10__hero">
    <div>
      <h1>Three levels<br><em>deep.</em></h1>
      <p>Nested ul · li:hover &gt; ul · :focus-within</p>
    </div>
  </section>
</div>
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,[email protected],400;6..72,500;6..72,600&family=DM+Mono:wght@400;500&display=swap');

.csh-10, .csh-10 *, .csh-10 *::before, .csh-10 *::after { box-sizing: border-box; margin: 0; padding: 0; }
.csh-10 ::selection{background:var(--ink);color:var(--cream)}
.csh-10 ::-moz-selection{background:var(--ink);color:var(--cream)}

.csh-10{
  --cream:#f6f1e7;
  --ink:#1d1a14;
  --wine:#7c2d3a;
  --gold:#b08442;
  --line:rgba(29,26,20,.12);
  font-family:'Newsreader',serif;
  background:var(--cream);color:var(--ink);
  min-height:100vh;position:relative;
}
.csh-10__header{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid var(--ink)}
.csh-10__bar{max-width:1180px;margin:0 auto;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,40px)}
.csh-10__logo{font-weight:600;font-size:1.7rem;letter-spacing:-.02em;text-decoration:none;color:var(--ink);font-variation-settings:'opsz' 72}
.csh-10__logo em{font-style:italic;color:var(--wine)}

/* Semantic nested <ul>/<li>/<ul>. Sub-lists are absolutely positioned and
   hidden via opacity/visibility, revealed on li:hover>ul AND :focus-within. */
.csh-10__nav>ul{list-style:none;display:flex;gap:2px}
.csh-10__nav li{position:relative}
.csh-10__nav a{display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--ink);font-size:1.02rem;font-weight:500;padding:10px 15px;border-radius:7px;white-space:nowrap;transition:background .2s,color .2s}
.csh-10__nav a .csh-10__chev{width:9px;height:9px;transition:transform .3s}
.csh-10__nav a:hover,.csh-10__nav a:focus-visible{background:rgba(124,45,58,.08);color:var(--wine)}

.csh-10__nav ul ul{
  list-style:none;position:absolute;min-width:230px;
  background:var(--cream);border:1px solid var(--ink);border-radius:12px;
  padding:7px;box-shadow:8px 10px 0 -2px var(--ink),0 24px 40px -22px rgba(29,26,20,.5);
  opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;
  transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .3s cubic-bezier(.16,1,.3,1),visibility .3s;z-index:10}
/* Transparent hover bridge fills the visual gap between trigger and panel so
   the mouse never crosses an un-hoverable dead zone (which would drop :hover).
   It lives on the parent li (always present) and only activates on hover so it
   never blocks neighbouring items at rest. */
.csh-10__nav li::after{content:'';position:absolute;display:none}
.csh-10__nav>ul>li:hover::after,.csh-10__nav>ul>li:focus-within::after{display:block;top:100%;left:0;right:0;height:10px}
.csh-10__nav ul ul li:hover::after,.csh-10__nav ul ul li:focus-within::after{display:block;top:0;bottom:0;left:100%;width:10px;right:auto}
/* LEVEL 2 — sits flush under the top item with an 8px breathing offset */
.csh-10__nav>ul>li>ul{top:100%;left:0;margin-top:8px}
/* LEVEL 3 — flies to the right of its level-2 parent */
.csh-10__nav ul ul ul{top:-8px;left:100%;margin-left:8px}
.csh-10__nav li:hover>ul,.csh-10__nav li:focus-within>ul{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.csh-10__nav li:hover>a>.csh-10__chev,.csh-10__nav li:focus-within>a>.csh-10__chev{transform:rotate(180deg)}
.csh-10__nav ul ul a{justify-content:space-between;width:100%;font-size:.96rem;padding:9px 13px}
.csh-10__nav ul ul a .csh-10__chev{transform:rotate(-90deg)}
.csh-10__nav li:hover>a>.csh-10__chev.csh-10__chev--side,.csh-10__nav li:focus-within>a>.csh-10__chev.csh-10__chev--side{transform:rotate(-90deg)}
.csh-10__nav ul ul a small{display:block;font-family:'DM Mono',monospace;font-size:.62rem;color:var(--gold);letter-spacing:.05em;margin-top:2px}

.csh-10__cta{font-family:'DM Mono',monospace;font-size:.78rem;background:var(--ink);color:var(--cream);padding:11px 20px;border-radius:30px;text-decoration:none;font-weight:500;transition:transform .3s cubic-bezier(.34,1.56,.64,1),color .3s}
.csh-10__bar a.csh-10__cta:hover{transform:translateY(-2px);color:var(--cream)}

.csh-10__hero{position:relative;z-index:1;min-height:calc(100vh - 72px);display:grid;place-items:center;text-align:center;padding:0 24px}
.csh-10__hero h1{font-size:clamp(2.6rem,9vw,6rem);font-weight:600;line-height:.96;letter-spacing:-.03em;font-variation-settings:'opsz' 72}
.csh-10__hero h1 em{font-style:italic;color:var(--wine)}
.csh-10__hero p{font-family:'DM Mono',monospace;margin-top:22px;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(29,26,20,.5)}

@media (max-width:820px){.csh-10__nav{display:none}}
@media (prefers-reduced-motion: reduce){.csh-10__nav ul ul,.csh-10__nav a,.csh-10__chev,.csh-10__cta{transition:none !important}}

More from 11 CSS Header Designs

Glassmorphism Transparent HeaderHeader with Announcement BarTwo-Tier Double-Decker HeaderAnimated Link Hover Effects HeaderVertical Sidebar Navigation HeaderShrinking Header on ScrollFlexbox 3-Column Navbar HeaderPure CSS Fixed Navigation (Sticky Header)CSS Grid Mega Menu HeaderFull-Screen Overlay Hamburger Header
View the full collection →

Search CodeFronts

Loading…

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