Выпадающие меню на CSS
Панели навигации выстраивали ссылки в ряд. Выпадающее меню добавляет вложенную панель, которая открывается под триггером — обычно при наведении, и лучше ещё когда фокус клавиатуры попадает внутрь. Освойте один спокойный CSS-паттерн, прежде чем изобретать гигантские мегаменю.
Набор инструментов выпадающего меню
📊 Выпадающие меню кратко
| Элемент | Повседневная роль |
|---|---|
| Relative-триггер | Родительский li (или обёртка) становится якорем позиционирования |
| Absolute-панель | Вложенное меню сидит под триггером (top: 100%) |
| Скрыто по умолчанию | display: none или за экраном до открытия |
Открытие :hover |
Указатель открывает панель |
:focus-within |
Пользователи клавиатуры могут открыть/удержать панель при табуляции |
z-index |
Держит открытую панель над следующим содержимым страницы |
Выпадающие меню только на CSS — учебная классика. Реальные продукты часто добавляют JS для переключения по клику на тач, Escape для закрытия и более богатой доступности — сначала выучите CSS-каркас здесь.
Relative-триггер, вложенный список
Оставьте ссылку-триггер в верхней панели и вложите второй список для подменю. Родительский пункт должен быть позиционирован, чтобы absolute-потомки знали свой дом.
.nav > li {
position: relative;
}
.nav > li > a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
Absolute-панель под триггером
Разместите подменю через position: absolute, прикрепите к низу триггера и дайте непрозрачный фон, чтобы текст страницы не просвечивал.
.nav .submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 12rem;
margin: 0;
padding: 0.35rem 0;
list-style: none;
background: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
Скрывать до открытия
По умолчанию панель закрыта. Открывать всё сразу — значит лишить смысла выпадающее меню.
.nav .submenu {
display: none;
}
Показывать при наведении
Когда указатель на родительском пункте — покажите панель. Padding у триггера помогает избежать случайного закрытия у края.
.nav > li:hover > .submenu {
display: block;
}
Предпочитайте ещё и focus-within
Одного hover недостаточно для клавиатуры. :focus-within держит панель открытой, пока фокус внутри пункта — спокойное CSS-улучшение.
.nav > li:hover > .submenu,
.nav > li:focus-within > .submenu {
display: block;
}
Спокойная привычка выпадающего меню
Relative-родитель, absolute-панель, скрыто по умолчанию, hover + focus-within, скромный z-index. Клик-переключение мегаменю и сложную ARIA оставьте более богатым паттернам позже — не путайте с уроком плоских панелей навигации.
.nav .submenu {
z-index: 20;
}
.nav .submenu a {
display: block;
padding: 0.45rem 0.9rem;
text-decoration: none;
color: inherit;
}
Попробуйте сами
- Сделайте каждый верхний
liкакposition: relative. - Вложите список
.submenuи позиционируйтеabsolute; top: 100%; left: 0. - Скройте через
display: none, затем покажите наli:hover. - Добавьте
:focus-within, чтобы фокус клавиатуры тоже открывал панель. - Поднимите
z-indexи запишите, когда добавили бы JS для клика на тач.
Частые ошибки
- Absolute-подменю без relative-родителя (панель улетает)
- Оставлять подменю видимым по умолчанию
- Убирать стили фокуса — пользователи клавиатуры теряются
- Собирать полное JS-мегаменю до изучения этого CSS-каркаса
- Считать выпадающие меню уроком всей вёрстки страницы
Итог
- Выпадающие меню вкладывают панель под relative-триггер
- Absolute +
top: 100%закрепляет меню под ссылкой - Скрывайте по умолчанию; показывайте hover и focus-within
- Используйте z-index, чтобы панель перекрывала контент
- Плоские навбары были раньше; вложенные меню — этот урок
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху