Испытание: выпадающее меню [28/28]. Мое решение на 100% и подробная инструкция.

w15 · 28.Август.2017 16:15:21

На выполнение этого задания я потратил всего 1 проверку и получил 100% результат. Начнем.
Первым делом зададим стили основному меню:

.main-menu {
   width: 200px;
   margin: 0;
   padding: 0;
   display: inline-block;
}

Далее оформим сами элементы списка: выберем режим отображения, зададим фон, рамку снизу и относительное позиционирование (т.е. относительно чего мы будем позиционировать наше выпадающее меню)

.main-menu li {
   display: block;
   background: #2980b9;
   border-bottom: 2px solid #2c3e50;
   position: relative;
   list-style: none;
}

так и не понял, нужно ли задавать display: block; или нет, но работает и без него.

Далее убираем у ссылок подчеркивание и меняем цвет текста, выбираем режим отображения и задаем отступы.

.main-menu li a {
   padding: 10px 15px;
   display: block;
   text-decoration: none;
   color: #ffffff;
}

Переходим к оформлению выпадающего блока меню. Задаем абсолютное позиционирование, чтобы мы могли разместить его где угодно, убираем маркеры, z-index чтобы меню было поверх основного и координаты и ширину.

.main-menu .sub-menu {
   position: absolute;
   z-index: 1;
   top: 0;
   left: 140px;
   width: 200px;
   display: none; - (только чтобы показать работу моего бонуса, а для решения не надо)
}

Элементам выпадающего меню изменим фон и цвет рамки:

.main-menu .sub-menu li {
   background: #1abc9c;
   border-bottom: 2px solid #2ecc71;
}

И наконец изменим фон активного элемента меню:

.main-menu .opened {
   background: #1abc9c;
}

Готово! Задание выполнено на 100%. Мне кажется, что мой код можно улучшить и сделать короче, хотя-бы на 1 строку убрав свойство display: block; у элементов меню, но правильно ли мне кажется?
P.S. Небольшой бонус от меня: для создания полноценного меню с выпадающим списком при наведении на пункт “Курсы” нужно последнюю строку заменить на:

.main-menu .opened:hover .sub-menu {
   display: block;
}

и дописать свойства:

.main-menu li:hover {
   background: #1abc9c;
}

.main-menu .sub-menu li:hover {
   background: #2ecc71;
}

Таким образом мы получим подсвечивание всех пунктов меню при наведении, а так-же выпадающее саб-меню при наведении на 2й пункт
Спасибо за внимание!

Ineska · 28.Август.2017 19:46:26

Здесь будут замечания. Не рекомендуется ограничивать ширину текстовых элементов. Может возникнуть неприятность в виде вывалившегося текста. List-style прописывается в целом списку меню. Display: block конечно лишнее, элемент li является блочным по умолчанию. Размеры пунктов меню (отступы) задаются ссылкам.
И еще вопрос, почему относительное позиционирование задается элементам списка, а не списку в целом?

w15 · 28.Август.2017 20:23:04

Изначально я задал List-style списку меню, но у саб-меню остались маркеры и я решил убрать их у элементов списка дабы повторно не писать это же свойство для саб меню. В предыдущей инструкции 20\28 я тоже не понял почему нужно отступы задавать ссылкам, а не элементам, если они работают одинаково. Но если задать их ссылкам, то им же дополнительно нужно присваивать display: block; Ширину задал главному меню и сабменю.
Про относительное позиционирование не могу ответить, я задал списку, но оно сработало от верхней границы, а когда элементам сработало от 2-го пункта почему так, не знаю.

Ineska · 29.Август.2017 05:42:01

Здесь могу согласиться, это разумно.
Отступы задаются ссылкам. Об этом не раз уже говорили. Таким образом мы увеличиваем зону клика по ссылке.
Вопрос об относительном позиционировании достаточно простой. Вы сможете разобраться сами.
Раз пишете инструкции, значит должны знать, что и почему именно так.

w15 · 29.Август.2017 07:07:17

Относительное позиционирование задается элементам списка чтобы можно было позиционировать объект относительно границ этих элементов, а не границ списка в целом.

shidoari · 22.Декабрь.2017 10:13:40

У меня такой код получился:

.main-menu {
width: 200px;
background: #2980b9;
margin: 0;
padding: 0;
list-style: none;
}

.main-menu a {
text-decoration: none;
padding: 10px 15px;
display: block;
border-bottom: 2px solid #2c3e50;
color: #ffffff;
}

.main-menu > li {
position: relative;
}

.main-menu .sub-menu {
position: absolute;
display: block;
left: 180px;
list-style: none;
background: #1abc9c;
z-index: 10;
top: 0;
padding: 0;
width: 200px;
}

.opened {
background: #1abc9c;
}

.sub-menu a {
border-bottom: 2px solid #2ecc71;
}

H_A · 04.Январь.2018 20:47:43

Я сделал так:

html,
body {
margin: 0;
padding: 0;
}

body {
width: 380px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}

.main-menu {
width: 200px;
list-style: none;
padding: 0;
margin: 0;
}

.main-menu > li {
position: relative;
background: #2980b9;
}

.main-menu a {
display: block;
margin: 0;
padding: 10px 15px;
text-decoration: none;
color: #ffffff;
border-bottom: 2px solid #2c3e50;
}

.main-menu > .opened > a {
background: #1abc9c;
}

.main-menu .sub-menu {
display: block;
position: absolute;
top: 0;
z-index: 1;
left: 180px;
width: 200px;
margin: 0;
padding: 0;
list-style: none;
background: #1abc9c;
}

.main-menu .sub-menu a {
border-bottom: 2px solid #2ecc71;
}

W15 не понимаю зачем используете здесь:

функцию:

display: inline-block;

объясните пожалуйста там и без нее все получается.
и если можно оцените мой ваирант. Спасибо.

Damir_27 · 19.Январь.2018 04:44:01

html, 
body {
    margin: 0;
    padding: 0;
}

body {
    width: 380px;
    min-height: 280px;
    padding: 10px;
    font-family: "Arial", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    background: #ecf0f1;
}

.main-menu {
    width: 200px;
    background-color: #2980b9;
    padding: 0;
    margin: 0;
    list-style: none;
}

.main-menu a {
    display: block;
    padding: 10px 15px;
    border-bottom: 2px solid #2c3e50;
    text-decoration: none;
    color: #ffffff;
}

.main-menu > li {
    position: relative;
}

.main-menu .opened a {
    background-color: #1abc9c;
}

.main-menu .sub-menu a {
    border-bottom: 2px solid #2ecc71;
}

.main-menu .sub-menu {
    position: absolute;
    width: 200px;
    background-color: #1abc9c;
    top: 0;
    left: 180px;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 10;
}

Проверьте мой код правильно ли всё?

Ineska · 19.Январь.2018 04:57:43

Почему не группируете общие правила у списков?

Marina_D · 02.Февраль.2018 13:36:22

html, 
body {
    margin: 0;
    padding: 0;
}

body {
    width: 380px;
    min-height: 280px;
    padding: 10px;
    font-family: "Arial", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    background: #ecf0f1;
}

.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 200px;
}

.main-menu a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    background-color: #2980b9;
    padding: 10px;
    padding-left: 15px;
}

.main-menu > li {
    border-bottom: 2px solid #2c3e50;
}

.main-menu .opened {
    position: relative;
}

.main-menu .opened a {
    background-color: #1abc9c;
}

.main-menu .opened .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    position:absolute;
    top: 0;
    left: 180px;
    width: 200px;
}

.main-menu .sub-menu a {
    border-bottom: 2px solid #2ecc71;
}

Stepoull · 03.Февраль.2018 22:35:05

100 %…но мне кажется что-то не так…слишком примитивно что ли? нет?

.main-menu {
width: 200px;
background-color: #2980b9;
margin-top: 0;
margin-left: 0;
list-style: none;
padding: 0;
}

.main-menu li {
border-bottom: 2px solid #2c3e50;
display: block;
position: relative;

}

.main-menu a {
color: #ffffff;
text-decoration: none;
display: block;
padding: 10px 15px;
}

.main-menu .sub-menu {
list-style: none;
background-color: #1abc9c;
z-index: 10;
}

.main-menu .sub-menu li {
border-bottom: 2px solid #2ecc71;
background-color: #1abc9c;
}

.main-menu .opened .sub-menu {
list-style: none;
margin: 0;
padding: 0;
position:absolute;
top: 0;
left: 180px;
width: 200px;
}

.main-menu .opened a {
background-color: #1abc9c;
}

Alexey42 · 09.Май.2018 13:01:51

А я вообще display: inline-block; в .main-menu не использовал и тоже 100%

EvgenegvE · 06.Апрель.2021 05:42:46

.main-menu {
padding: 0;
margin: 0;
width: 200px;
list-style: none;
}

.main-menu .sub-menu {
width: 200px;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 180px;
z-index: 10;
list-style: none;
display: none;
}

.main-menu a {
display: block;
color: #ffffff;
padding: 10px 15px;
text-decoration: none;
background: #2980b9;
border-bottom: 2px solid #2c3e50;
}

.main-menu > li {
position: relative;
}

.main-menu a:hover {
background: #1abc9c;
}

.main-menu .sub-menu a {
border-bottom: 2px solid #2ecc71;
background: #1abc9c;
}

.main-menu li:hover .sub-menu,
.main-menu .open .sub-menu {
display: block;
}

.main-menu > .open > a {
background-color: #1abc9c;
}