Сделал на 100% но не даёт покоя как решил проблему с разделением вложенного списка и первым пунктом меню. Используя маргины и делая рамку сверху а не снизу у все пунктов первого уровня т.к никак вложенный список не отлипал от первого который active. Как сделать это грамотнее ?
li {
list-style:none;
}
.main-menu {
padding:0px;
margin:0px;
width:200px;
}
.main-menu > .active {
background-color:#1ABC9C;
}
.main-menu >li > a{
text-decoration:none;
color:white;
padding-left:5px;
}
.main-menu ul {
background:white;
margin-top:2px;
padding: 10px 0px 10px 10px;
margin-left:-10px;
margin-top:10px;
margin-bottom:-10px;
border-top:2px solid #2C3E50;
}
.main-menu > li {
border-bottom:2px solid #2C3E50;
background-color:#2980B9;
padding:10px 0px 10px 10px;
}
.main-menu ul li {
padding:5px;
}
.main-menu ul a {
color:#2980B9;
}