Мастерская: создаём меню / Позиционируем выпадающее подменю [22/28]
×

Позиционируем выпадающее подменю [22/28]

Затем выпадающее подменю располагают в том месте, куда оно будет «выпадать». Лучше располагать так, чтобы оно немного «нависало» над родительским пунктом.

Также нужно установить для подменю z-index больше, чем у родительских пунктов, чтобы подменю располагалось выше и перекрывало их при появлении.

Так как абсолютное позиционирование сбрасывает ширину, то можно установить ширину для подменю.

Хотите писать JavaScript, используя современный синтаксис (ES2015, ES2016, ES2017)? Уметь тестировать свои программы? Записывайтесь на продвинутый интенсив по JavaScript.

Выполнить задание
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; margin: 0; padding: 0; list-style: none; background: #fcf8e3; }
HTML Academy
  1. Задайте подменю координату сверху 5px, координату слева 170px,
  2. cвойство z-index со значением 10,
  3. а также ширину 150px.
Теория Проверить Следующее задание
Идёт запись на курс HTML и CSS, уровень 1 #21, который стартует 28 мая.

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

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

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

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