Advanced Dropdowns — Code Challenge
Put keep a disclosure usable by keyboard into practice. Rebuild the example from its HTML, then compare your result with the CSS solution. Change the content and the viewport before calling it finished.
How it works
- An open state, focus indicator, and clear link targets help a disclosure feel deliberate. Native disclosure behaviour is enough for a simple list of links.
- Keep navigation in semantic HTML with descriptive links. CSS changes layout and states, not the destination or the meaning of a control.
- Test long labels and narrow widths before treating the example as a reusable navigation component.
Your task
Use the HTML below to explore this rule: An open state, focus indicator, and clear link targets help a disclosure feel deliberate. Native disclosure behaviour is enough for a simple list of links. Write your own CSS before opening the solution. Then replace the heading with a longer one and verify that the content is still readable.
Review the CSS solution
details[open] { background: #edf4e9; }
summary:focus-visible { outline: 3px solid #2a7151; outline-offset: 4px; }
details a { display: block; padding: 10px; }
A solution to compare
The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.
<details><summary>Workshop topics</summary><nav aria-label="Workshop topics"><a href="#repair">Repair club</a><a href="#woodwork">Woodwork</a></nav></details>
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }
/* This lesson */
details[open] { background: #edf4e9; }
summary:focus-visible { outline: 3px solid #2a7151; outline-offset: 4px; }
details a { display: block; padding: 10px; }
An open state, focus indicator, and clear link targets help a disclosure feel deliberate. Native disclosure behaviour is enough for a simple list of links.