Многоуровневое меню [15/28] - 100%

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

CSS

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 {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 200px;
}

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

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

.main-menu > .active > a {
    background: #1abc9c;
    border-bottom: 2px solid #2c3e50;
}

.main-menu ul {
    background: #ffffff;
    list-style: none;
    padding: 10px 0;
}

.main-menu li li a {
    background: #ffffff;
    padding: 5px 15px;
    color: #2980b9;
    text-decoration: underline;
}
2

Сначала сделал так же, но смутила одна вещь, что во второстепенном списке отступ от верхнего и нижнего элемента больше, чем между самими элементами.
Один из вариантов решения как у вас:

.main-menu ul {
    background: #ffffff;
    list-style: none;
    padding: 10px 0;
}

Но в этом случае из-за паддингов появляются дырки в 10px сверху и снизу, которые конечно можно залить фоном и их будет не видно, как Вы и сделали. Но получается, что в этих местах на кнопку не нажать.
Как один из вариантов, сделать все через селекторы :last-child и :first-child, в этом случае и фон можно задать ссылкам, а не списку.

.main-menu > li > ul > li:first-child a {
    padding-top: 15px;    
}
.main-menu > li > ul > li:last-child a {
    padding-bottom: 15px;    
}