The Pure CSS Dropdown Menu

pure css 2003 still works

A navigation dropdown that opens on hover using only nested lists and :hover.

In 2026: The submenu is a nested list set to display:none and revealed by li:hover > ul. Browsers still do this, but a touch screen has no hover state, so real menus later added a click or focus fallback. Before jQuery this was the whole dropdown.

Where it came from: Patrick Griffiths and Dan Webb, 'Suckerfish Dropdowns', A List Apart, 2003, building on Eric Meyer's Pure CSS Menus. A List Apart ↗

<style>
.nav, .nav ul { list-style: none; margin: 0; padding: 0; }
.nav > li { position: relative; display: inline-block;
            background: #234a6b; color: #fff; padding: 6px 14px; }
.nav ul { position: absolute; left: 0; top: 100%;
          display: none; min-width: 150px; z-index: 5; }
.nav ul li { background: #336789; padding: 6px 14px;
             border-top: 1px solid #234a6b; }
.nav li:hover > ul { display: block; }
</style>

<ul class="nav">
  <li>Home</li>
  <li>Products
    <ul>
      <li>Widgets</li>
      <li>Gadgets</li>
      <li>Gizmos</li>
    </ul>
  </li>
  <li>About</li>
</ul>
<p>Hover "Products". The submenu drops with no script. This was the navigation dropdown before jQuery.</p>

sandboxed demo · breaks nothing but itselfrestart

More in pure css

all 4 in pure css › · the whole library ›