Помогите понять

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

Здравствуйте. Помогите разобраться. Вот код по заданию “Испытание: многоуровневое меню”

html, body{
    margin:0;
    padding:0;
}
body{
    width:280px;
    min-height:280px;
    padding:10px;
    font-family:Arial, sans-serif;
    font-size:14px;
    line-height:1.4;
    background:#ecf0f1;
}
.main-menu{
    width:200px;
    padding:0;
    margin:0;

    list-style:none;
}
.main-menu>li{
    border-bottom:2px solid black;
    background:#2980B9;
    
}    
.main-menu a{
    display:block;
    padding:9px 15px;
    color:#fff;
    text-decoration:none;
    margin:0;
}
.active>ul>li>a{
    padding-top:3px;
    padding-left:15px;
    background:#fff;
    color:#2980B9;
    text-decoration:underline;

}

.main-menu>.active>a{
    color:white;
    background:#1ABC9C;
    border-bottom:2px solid black;
}
.main-menu ul{
    padding:0;
    margin:0;
    list-style:none;
}
.active ul li:first-child a{
padding-top:16px;
padding-left:15px;
}
.active ul li:last-child a{
    padding-bottom:16px;
padding-left:15px;
}

Что я делаю не так??? Я же не могу угадывать попиксельно, чтобы картинка сошлась с образцом. Потому как кратные 5рх отступы не получаются ((

2

Не стоит угадывать по некратным 5 пикселям (хоть и такое решение тоже можно рано или поздно найти).

Нужно убрать отступы для первой и последней ссылки, они лишние. Для обоих ul нужно задать паддинг, чтобы он сразу подвинул все ссылки. Для всех ссылок списка первого уровня нужен одинаковый паддинг, для ссылок списка второго уровня — тоже одинаковый паддинг.

В общем, там все паддинги кратны 5.

И, кстати, цвет границы не black нужен, а #2C3E50.

3

Спасибо )) Все получилось, просто зациклился на одном и кручусь в одном и том же месте )

1 лайк