задание 28/28, выпадающее меню

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

Доброго времени суток!
мой код:

 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 {
    background: #2980B9;
    list-style: none;
    width: 200px;
    padding: 0;
    margin: 0;   
}
.main-menu > li {
    position: relative;
}
.main-menu a {
    display: block;
    padding: 10px 15px;
    border-bottom: 2px solid #2C3E50;
    text-decoration: none;
    color: #fff;
}
.main-menu .sub-menu {
    display: none;
    width: 200px;
    background: #1ABC9C;
    position: absolute;
    left: 180px;
    top:0px;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 10;
}
.main-menu .sub-menu a {
    border-bottom: 2px solid #2ECC71;
}
.main-menu .opened {
   background: #1ABC9C;
}
.main-menu .opened .sub-menu {
    display: block;
}

В селекторе .main-menu .sub-menu {…} пишу top: 0px; тогда все получается, если эту запись убрать, то получаю съехавшее вниз подменю, вопрос почему оно съезжает.
Скрин, когда убираю top: 0px;

И еще просьба к знающим людям, в целом правильность\оптимальность кода как оцените?

2

Код нормальынй вроде :grinning:

Можно причесать ещё под кодгайду https://htmlacademy.github.io/codeguide/.

Каскад лучше делать максимально простым, например, вместо .main-menu .sub-menu a просто .sub-menu a.

Но это всё рекомендации, так-то код норм.

А насчёт координат top и left: абсолютно спозиционированный блок без указания координат (top, left, bottom, right) будет находиться в том месте, в котором он идёт в «потоке» блоков, только он выпадает из потока. Это поведение иногда бывает полезно, но обычно лучше всегда явно позиционировать абсолютные блоки.

3

Спасибо!

1 лайк
4

Где ошибка?
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;
padding:0;
margin:0;
width:200px;
}
.main-menu .opened a{
position:relative;
background-color:#1ABC9C;
display:block;
}
.main-menu li a{
color:#FFFFFF;
background-color:#2980B9;
padding: 10px 15px;
display:block;
border-bottom:2px solid #2C3E50;
text-decoration:none;
}
.main-menu li li{
list-style:none;
padding:0;
margin:0;
display:block;
width:200px;
background-color:#1ABC9C;
position:absolute;
display:inline-block;
}
.main-menu .sub-menu a{
background-color:#1ABC9C;
border-bottom:2px solid #2ECC71;
text-decoration:none;}

5

Ваши ошибки в этом фрагменте:
.main-menu li li{
list-style:none;
padding:0;
margin:0;
display:block;
width:200px;
background-color:#1ABC9C;
position:absolute;
display:inline-block;
}
Во-первых, у вас 2 display получается. И ни один из них вам не нужен.
Посмотрите внимательно. Абсолютное позиционирование вы задаете каждому элементу подменю. Они выпадают из потока. Но дальше вы не определяете им место с помощью координат top и left. Причем пришлось бы позиционировать каждый элемент в отдельности.
Поэтому лучше абсолютное позиционирование задать всему подменю. А дальше с помощью top и left установить его на место.
У вас должно получиться примерно так:
.sub-menu {
padding: 0;
margin: 0;
position: absolute;
left: 190px;
top: 51px;
width: 200px;
}
.sub-menu li {
list-style: none;
}
Такой вариант даст вам 100%. Но вы можете доработать его, если хотите сделать, чтобы все отступы были кратны 5.

1 лайк
6

Спасибо большое за помощь, очень доходчиво объяснили. А я сидел голову ломал поздней ночью, наверно надо было на след день трезво посмотреть на код. Два раза написать дисплей, по-моему это уже через чур…

1 лайк
7

Всякое может быть. Не будьте к себе слишком строги. Ошибки неизбежны.