Мастерская: создаём меню / Отображаем подменю при наведении [23/28]
×

Отображаем подменю при наведении [23/28]

Последний этап — добавление интерактивности.

Сначала прячем выпадающее подменю по умолчанию, с помощью display: none;.

Затем делаем так, чтобы при наведении мыши на пункт меню, внутри которого расположено подменю, оно появлялось. Для этого используем контекстный селектор в сочетании с псевдоклассом :hover и display: block;.


Выполнить задание
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> <li><a href="#contacts">Контакты</a></li> </ul> </body> </html>
CSS
body { padding: 10px; font-family: "Arial", sans-serif; font-size: 14px; line-height: 1.4; } .main-menu { width: 180px; margin: 0; padding: 0; list-style: none; } .main-menu a { display: block; margin-bottom: -1px; padding: 8px 14px; text-decoration: none; color: #0088cc; border: 1px solid #e5e5e5; } .main-menu a:hover { background: #f5f5f5; } .main-menu > li { position: relative; } .main-menu .sub-menu { position: absolute; top: 5px; left: 170px; z-index: 10; width: 150px; margin: 0; padding: 0; list-style: none; background: #fcf8e3; } /* Cелектор для подменю, если навести мышь */ /* на родительский элемент верхнего меню */ .main-menu > li:hover .sub-menu { }
HTML Academy
  1. Спрячьте подменю по умолчанию.
  2. Сделайте так, чтобы оно появлялось при наведении на родительский элемент списка. Наведите мышь на второй пункт, чтобы подменю появилось.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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