Мастерская: создаём меню / Включаем механизм выпадания [26/28]
×

Включаем механизм выпадания [26/28]

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

Прячем подменю по умолчанию и отображаем с помощью контекстного селектора с псевдоклассом :hover.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Включаем механизм выпадания</title> </head> <body> <ul class="main-menu"> <li><a href="#company">О компании</a></li> <li> <a href="#services">Услуги</a> <ul class="sub-menu"> <li><a href="#1">Разработка</a></li> <li><a href="#2">Продвижение</a></li> <li><a href="#3">Контекст</a></li> </ul> </li> <li><a href="#team">Сотрудники</a></li> </ul> </body> </html>
CSS
body { min-width: 300px; padding: 10px; font-family: "Arial", sans-serif; font-size: 14px; line-height: 1.4; } .main-menu { margin: 0; padding: 0; list-style: none; border: 1px solid #e5e5e5; } .main-menu > li { position: relative; display: inline-block; margin-right: -4px; } .main-menu a { display: block; margin-left: -1px; padding: 8px 10px; color: #0088cc; border-left: 1px solid #e5e5e5; } .main-menu a:hover { background: #f5f5f5; } .main-menu .sub-menu { position: absolute; left: 1px; width: 150px; margin: 0; padding: 0; list-style: none; background: #fcf8e3; } .main-menu .sub-menu a { margin-bottom: -1px; border: 1px solid #e5e5e5; } .main-menu > li:hover .sub-menu { }
HTML Academy
  1. Спрячьте подменю по умолчанию.
  2. Сделайте так, чтобы оно появлялось при наведении на родительский элемент списка. Наведите мышь на второй пункт, чтобы подменю появилось.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.