Even if you nest details elements, you can ensure only one level of them is open at a time, making a menu you can drill down (and up!) from.

Frontend Masters is an online learning platform offering  courses on frontend development technologies such as JavaScript, HTML, CSS, React, and Vue.js. Readers can learn about advanced frontend concepts, best practices, and modern development workflows from industry experts. With video lectures, exercises, and real-world projects, Frontend Masters provides  guidance and expertise for mastering frontend development skills.

Frontend Masters

A tutorial on building a drill-down nested menu using HTML `<details>` elements and the CSS `@scope` rule. The technique uses `@scope`'s 'donut' scoping — defining a scope root and scope limit — to hide sibling and parent menu levels when a submenu is open, leaving only the active nested level visible. Includes code examples for both the HTML structure and the CSS `@scope` selector pattern.

The Drill-Down Menu with Details and @scope – Frontend Masters Blog

<p>Nice approach using <code>&lt;details&gt;</code> with <code>@scope</code>. Keeping only the active level visible makes nested menus much cleaner and easier to manage without heavy JS.</p>
