Задание 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 {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}
.main-menu a {
    display: block;
    width: 180px;
    color: white;
    text-decoration: none;
    background-color: #2980b9;
    padding: 10px 5px 10px 15px;
    border-bottom: 2px solid #2C3E50;
}
.main-menu .sub-menu {
    list-style: none;
    display: none;
    position: absolute;
    top: 41px;
    left: 180px;
    
}
.opened a:hover {
    background: #1abc9c;
}
.sub-menu a {
    background: #1abc9c;
    border-bottom: 2px solid #2ecc71;
}
.main-menu > li:hover .sub-menu{
    display: block;
    margin: 0;
    padding: 0;
}

Вот что получилось:

ScreenShot_20160228200230.png516×655 27.5 KB

Вкладка Наложение показывает следующее:

Хотя меню появляется при наведении. Размеры, отступы, цвета, рамки совпадают. Чего не хватает?

2

Меню должно быть активно сразу, а не только при наведении.

2 лайка
3

Понял. Спасибо. Сделал больше, чем нужно было… :hover был совсем не нужен оказывается. Странно, что в последнем задании он не используется.

1 лайк
4

Вот вроде 100%, а удовлетворения нет. Как можно избавиться от “margin-top: 1px” для .sub-menu?

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;
position: relative;
}

.main-menu > li > a {
display: block;
text-decoration: none;
padding: 10px 15px;
border-bottom: 2px solid #2C3E50;
width: 170px;
background-color:#2980B9;
color: #FFFFFF;
}

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

.main-menu .sub-menu li {
list-style: none;
padding: 0;
margin: 0;
}

.main-menu .sub-menu a {
display: block;
right: 100px;
text-decoration: none;
width: 175px;
padding: 10px 10px 10px 15px;
color: #FFFFFF;
border-bottom: 2px solid #2ECC71;

}

.main-menu .opened .sub-menu {
position: absolute;
left: 140px;
top: 40px;
margin-top: 1px;
}

5

Можно. Если вы напишете position: relative; для пунктов основного меню с помощью селектора .main-menu > li , а не для самого меню. Тогда координаты подменю будут рассчитываться относительно пункта меню, к которому оно открывается. А значит координата сверху будет нулевая и внешний отступ сверху тоже не будет нужен. Единственное, придется z-index добавить.
(Уберите координату right: 100px; у ссылок подменю. Она там не работает. )

2 лайка
6

Ах вот оно как… Попробую.
Благодарю!

1 лайк