CSS Dropdown Menu Examples

A CSS-styled disclosure is a practical beginner-friendly alternative to a JavaScript-driven navigation menu.

The native <details> element provides an open/closed state and <summary> provides an operable label. Style details[open] to distinguish the expanded state.

For real application menus that require focus management, keyboard arrow navigation, and selection semantics, use appropriate accessible behavior rather than assuming a hover-only dropdown is enough.

Clicking summary updates the native open attribute. CSS can match [open] and reveal a styled list of links.

Click the summary to open and close the links.

HTML

<details class="drop"><summary>Browse topics</summary><ul><li><a href="#css">CSS</a></li><li><a href="#html">HTML</a></li><li><a href="#go">Go</a></li></ul></details>

CSS

.drop { max-width: 240px; padding: 12px; border: 1px solid #93c5fd; border-radius: 8px; } .drop summary { cursor: pointer; font-weight: 700; color: #1d4ed8; } .drop a { color: #1d4ed8; }

Rendered output

Observe: The list expands only when details is open; no script is necessary.

Style the expanded state and interactive links.

HTML

<details class="drop"><summary>Browse topics</summary><nav aria-label="Topic menu"><a href="#css">CSS lessons</a><a href="#html">HTML lessons</a><a href="#go">Go lessons</a></nav></details>

CSS

.drop { display: inline-block; min-width: 185px; background: #eff6ff; border: 1px solid #60a5fa; border-radius: 9px; } .drop summary { cursor: pointer; padding: 12px; font-weight: 700; } .drop[open] { background: #dbeafe; } .drop nav { display: grid; gap: 3px; padding: 6px; } .drop a { color: #1e40af; padding: 9px; border-radius: 5px; text-decoration: none; } .drop a:hover, .drop a:focus-visible { background: #bfdbfe; text-decoration: underline; }

Rendered output

Observe: Open the disclosure to view stacked links and their focus/hover backgrounds.

Clicking summary updates the native open attribute. CSS can match [open] and reveal a styled list of links.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• A hover-only dropdown cannot be operated consistently on touch devices.

• details is a disclosure, not automatically a full ARIA menu widget.

Tab to the summary and use Enter/Space to toggle; then tab through the expanded links.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Choose native interactive elements when their built-in behavior matches the task.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.