15/28 Поделюсь своим решением 100%

Пусть не самое красивое…

.main-menu {
    width: 200px;
    padding: 0;
    margin: 0;
    list-style: none;  
}
.main-menu > li {background:#2980b9;}
.main-menu > li > a{
    color:#fff;
    text-decoration: none;
    border-bottom: 2px solid #2c3e50;}
.main-menu a {
    display: block;
    padding: 10px 15px;
    color: #0088cc;
}
.main-menu a:hover {background: #f5f5f5;color:#555;}
.main-menu > .active > a {
    color: white;
    background: #1abc9c;}
.main-menu ul {/*подменю---------*/
    list-style: none;
    background:#fff;
    border-bottom: 2px solid #2c3e50;
    padding:15px 0px;
}
.main-menu ul > li{margin:-10px 0px;}
.main-menu ul a{color:#2980b9;}
1 лайк

Не сбросили внешние отступы у списка, поэтому получились отрицательные здесь.

1 лайк