Коротко: меню в CSS оформляют через список: убирают маркеры (list-style: none), задают отступы и цвета, а для горизонтального вида — display: flex с gap. Активный пункт и подменю оформляют отдельными правилами. В WordPress к пунктам автоматически добавляются классы вроде .current-menu-item.
Базовая разметка меню
<nav class="menu">
<ul>
<li class="current-menu-item"><a href="/">Главная</a></li>
<li><a href="/uslugi/">Услуги</a></li>
<li><a href="/contacts/">Контакты</a></li>
</ul>
</nav>Вкладки: что и как менять
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a {
text-decoration: none;
color: #505050;
}Первым делом убирают маркеры и подчёркивание. Иначе любой дизайн меню «рассыпается».
.menu ul {
display: flex;
gap: 24px;
align-items: center;
}flex + gap — современный способ выстроить пункты в строку с равными промежутками. Никаких inline-block с «волшебными» пробелами.
.menu a:hover { color: #003F8F; }
.menu .current-menu-item > a {
color: #003F8F;
font-weight: 600;
}WordPress сам добавляет .current-menu-item для активной страницы и .menu-item-has-children для пунктов с подменю. Используйте эти классы вместо «угадывания».
.menu .sub-menu {
display: none;
position: absolute;
min-width: 220px;
background: #fff;
box-shadow: 0 8px 24px rgba(0,0,0,.12);
border-radius: 8px;
padding: 8px 0;
}
.menu li:hover > .sub-menu { display: block; }Подменю показывают при наведении или по клику. На тач-устройствах hover не работает — добавьте обработчик клика и класс, либо используйте :focus-within.
flex-direction: column и раскрытием по классу .is-open.Практика: меню в стиле сайта
- Обнулите маркеры и отступы списка.
- Задайте шрифт, размер и цвет ссылок.
- Выстройте в строку через flex + gap.
- Опишите состояния
:hover,:focus-visibleи активный пункт. - Оформите подменю (позиционирование, тень, отступы).
- Проверьте на мобильном и с клавиатуры.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Видно точки списка | не убран list-style |
list-style: none |
| Пункты в столбик | нет flex | display: flex |
| Подменю «разъезжается» | нет position: relative у родителя |
задать позиционирование |
| Активный пункт не подсвечен | не использован класс WP | стилизовать .current-menu-item |
Проверьте себя
Вопросы и ответы
Раскрывать по клику (класс .is-open), а не по hover: на тач-устройствах наведения нет.
Классы добавляет функция wp_nav_menu(). Их можно расширить фильтром nav_menu_css_class, но обычно стандартных хватает.
position: sticky; top: 0; у контейнера меню — оно останется вверху при прокрутке.
Оно позиционируется от ближайшего родителя без position. Задайте position: relative пункту меню.
Итоги
- Начинайте со сброса: маркеры, подчёркивания, отступы.
- Строка пунктов — flex + gap.
- Используйте классы WordPress для активного пункта и подменю.
- На мобильных — «бургер» и раскрытие по клику.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.