Html: Выпадающее меню

CSS: Позиционирование 22 сообщения
Обновлено: 08 сент., 17:00
537
Студентов
86%
Завершения

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

В этом испытании вам дана вёрстка меню с выпадающим подменю. Но работоспобность оставляет желать лучшего.

Ваша задача: дополнить недостающие стили селекторов:

  • .sub-menu
  • .nav li
  • .nav li:hover > .sub-menu

Алгоритм работы выпадающего меню

  • В исходном состоянии все подменю скрыты
  • При наведении на пункт меню должно появляться подменю

Примеры

Начальное состояние

Начальное состояние меню

Hover на втором пункте меню

Hover на втором пункте меню

Подсказки

  • Посмотреть финальные результаты в трёх состояниях можно в директории __tests__/__image_snapshots__
  • Используйте свойство display со значениями none и block

Для полного доступа к испытанию нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов