Как сделать выпадающее меню только на CSS?

Question

Accepted Answer

## Базовый приём

Показать подменю по `:hover` / `:focus-within` у родителя, без JS.

```css
.menu { position: relative; }
.submenu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
}
.menu:hover .submenu,
.menu:focus-within .submenu {
  display: block;
}
```

Вариант на чекбоксе/`:checked` для клика без hover. Для доступности нужны фокус, клавиатура, `aria-expanded` — чистый CSS быстро упирается в a11y; в проде чаще JS-компонент.

## Итог

`:hover`/`:focus-within` + абсолютное подменю работают для демо. Для продакшена заложите клавиатуру и screen reader — CSS-only редко достаточен.