Как сделать горизонтальное меню из списка
Короткий ответ
Уберите у списка маркеры и отступ и выстройте пункты в ряд через flexbox:
<style>
.menu { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.menu a { color: inherit; text-decoration: none; }
.menu a:hover { color: steelblue; }
</style>
<nav>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav><nav> помечает блок как навигацию: программы чтения с экрана позволяют перейти к нему одной клавишей.
Разделители и текущая страница
Разделитель добавляют псевдоэлементом всем пунктам, кроме первого. Текущую страницу отмечают атрибутом aria-current="page" и по нему же выделяют:
<style>
.menu { display: flex; gap: 12px; padding: 0; list-style: none; }
.menu li + li::before { content: "·"; margin-right: 12px; color: gray; }
.menu [aria-current] { font-weight: 700; color: inherit; text-decoration: none; }
</style>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#" aria-current="page">Blog</a></li>
<li><a href="#">About</a></li>
</ul>Много пунктов
Если пункты не помещаются в строку, flex-wrap: wrap переносит их на следующую. На телефонах длинное меню обычно прячут под кнопку.
Частая ошибка
Ссылки в меню делают маленькими — щёлкать можно только по самому тексту. Добавьте ссылкам отступы padding (и display: block), чтобы область нажатия была крупнее, особенно для пальца на сенсорном экране.
Функции из этого ответа
- <nav> — Блок основной навигации: меню сайта, оглавление, хлебные крошки.
- <ul> — Маркированный список: пункты, порядок которых не важен.
- display — Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.
- gap — Промежутки между элементами во flexbox и grid.
- aria-* — Атрибуты доступности: роль, название и состояние элемента для программ чтения с экрана.