Многоуровневое меню

Курсы §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,.main-menu ul{
    list-style:none;
    padding:0;
    margin:0;}
.main-menu>li>a{
    text-decoration:none;}
a{
    display:block;
    color:#ffffff;
    background:#2980B9;
    width:170px;
    padding:10px 15px;
    border-bottom:2px solid #2C3E50;
    }   
    
.active>a{
    background:#1ABC9C;} 
.active ul a{
    background:#ffffff;
    border:0;
    color:#2980B9;
    padding:5px;}
.active ul{
    padding:10px;
    background:#ffffff;
    width:180px;
                 }    
.main-menu>li:nth-child(2){
    border-top:2px solid #2C3E50}  
li{width:200px;}/*костыль для бордера*/

Ребят, может кто подскажет: как убрать костыль? Заранее благодарен.

2

Попробуйте задавать ширину не для дочерних элементов, а для самого меню.

.main-menu { 
  width: 200px; 
}