Как сделать меню css?

Горизонтальное меню чаще всего делают на списке ul с пунктами li, а не на голых ссылках подряд, потому что список это семантически верная структура для набора пунктов навигации, и скринридер объявит количество элементов.

nav ul { display: flex; list-style: none; gap: 24px; margin: 0; padding: 0; } nav a { text-decoration: none; color: inherit; }

Сброс list-style убирает точки перед пунктами, а display: flex на ul выстраивает li в ряд вместо столбика по умолчанию. gap задаёт расстояние между пунктами без лишних margin у каждого li отдельно, что удобнее при добавлении или удалении пунктов меню.

Для мобильной версии обычно прячут это меню и показывают кнопку бургер, по клику на которую меню выезжает сбоку или сверху, это уже требует немного js для переключения класса, чистым css такое поведение сделать сложнее и менее предсказуемо для доступности.

Выпадающие подменю делаются через вложенный ul внутри li, который по умолчанию скрыт через display: none, а показывается на hover родительского li или через отдельный класс, добавляемый js при клике, второй вариант удобнее для мобильных, где hover не работает как ожидается.

Активный пункт меню, соответствующий текущей странице, стоит помечать отдельным классом на сервере или в шаблоне, а не пытаться определить его чистым css, потому что css не знает какая страница открыта сейчас.