Мастерская: создаём меню / Испытание: выпадающее меню [28/28] 100%

Курсы §13. Мастерская: создаём меню
1

Добрый день,

Можете прокомментировать данный код?

.main-menu {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}

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

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

.sub-menu {
display: block;
text-decoration: none;
list-style: none;
position: absolute;
top: 41px;
left: 140px;

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

2

Этот уже лучше, но всё же позволю себе чуть подкорректировать:

  1. Я бы убрал position: relative из .main-menu - всё же подменю привязано к элементу списка .main-menu li, но никак к самому контейнеру списка .main-menu. И добавил в .main-menu общую ширину - ведь, делая ссылки display: block;, вы тем самым приказываете им растянуться во всю ширину родительского контейнера; А также именно ему бы задал синий фоновый цвет - вспомните историю с горизонтальным меню, где это играет роковую роль!
  2. .main-menu a - распространяется на ВСЕ ссылки, в т.ч. которые находятся в .sub-menu, поэтому нет смысла дублировать в .sub-menu text-decoration: none;
  3. В .main-menu a - можно прописать паддинги в одну строку: padding: 10px 15px;
  4. Самому .sub-menu совсем бессмысленно задавать display: block - контейнеры списков - ul - по умолчанию блочные.
  5. Привязку выпадающего меню я бы сделал к .main-menu .opened - соответственно, у подменю скорректируется координата top. Ну, и общую ширину я задал бы всему контейнеру .sub-menu.
    Судя по Вашим вопросам, я вижу, что Вы не до конца различаете ul и li. Тогда сделайте вот что: создайте какой-нибудь список из хотя бы 3-4 пунктов. И задайте и ul, и li свойство outline: 1px solid red, только цвет outline для li задайте какой-нибудь другой. И Вы тогда увидите их разницу.
3

Алексей,

Спасибо за ваши комментарии!

Вы верно заметили что я не до конца понял различия между ul и li.
Как говориться повторения мать учения!
Я еще раз пройдусь по пройденным темам, и конечно же по практикуюсь как вы сказали.

С уважением,
Муратбек.

4

Всегда пожалуйста! А в плане ul и li тогда совсем грубый пример: представьте тумбочку с ящиками в разрезе (вид сбоку): ul - это стенки самой тумбочки, это то, в чём находятся ящики. А сами ящики - это li. И ведь обычно между задней стенкой ящиков и самой тумбочки есть какое-то пространство - именно его Вы убираете, задавая list-style: none; Теперь разница ясна?

1 лайк
5

Алексей,

Теперь все понятно!
Ок, буду практиковаться!

Спасибо!

С уважением,
Муратбек.