Мастерская: создаём меню / Тестируем на большой вложенности [14/28]
×

Тестируем на большой вложенности [14/28]

Оформление завершено. Теперь проверим, как ведут себя наши стили, когда меню содержит больше двух уровней вложенности.

Мы разметили трехуровневый список, но не добавили ему класс меню, поэтому он выглядит не очень красиво. Добавьте списку класс main-menu и посмотрите, как он преобразится.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Тестируем на большой вложенности</title> </head> <body> <ul> <li><a href="#company">О компании</a></li> <li class="active"><a href="#services">Услуги</a> <ul> <li><a href="#s1">Разработка</a></li> <li><a href="#s2">Продвижение</a></li> <li><a href="#s3">Контекст</a> <ul> <li><a href="#ya">Яндекс</a></li> <li><a href="#go">Google</a></li> </ul> </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; padding: 0; margin: 0; list-style: none; } .main-menu > li { margin-bottom: -1px; border: 1px solid #e5e5e5; } .main-menu a { display: block; padding: 8px 14px; text-decoration: none; color: #0088cc; } .main-menu a:hover { background: #f5f5f5; } .main-menu > .active > a { color: white; background: #0088cc; } .main-menu ul { margin: 0; padding: 5px 0; padding-left: 30px; list-style: none; } .main-menu li li a { padding: 3px 0; color: black; } .main-menu li li a:hover { text-decoration: underline; background: none; }
HTML Academy
  1. Добавьте списку класс main-menu.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

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

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

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

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