Мастерская: создаём меню

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

Спрячьте подменю по умолчанию.
Сделайте так, чтобы оно появлялось при наведении на родительский элемент списка. Наведите мышь на второй пункт, чтобы подменю появилось.

Теория Проверить Следующее задание

Идёт запись на курс Базовый PHP #2, который стартует 22 августа.

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

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

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

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

Обучение

Компания

Контакты

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

Обучение

Компания

Контакты