15/28 [100%], прошу прокомментировать код

Курсы §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 #2c3e50;
    }

    .main-menu ul {
      list-style: none;
     padding: 5px 0 15px 0;
     background-color: #ffffff;


    }

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

      
      .main-menu > .active > a {
           background-color: #1abc9c;
             border-bottom: 2px solid #2c3e50;
           
                   
      }
      
      .main-menu li li a {
          background: #ffffff;
          color: #2980b9;
              text-decoration: underline;
               padding: 10px 0 0 15px;
               }
2

Отступы можно было более симметрично выставить. Вот вы пишете 10 сверху - 0 снизу, а можно было 5 сверху и 5 снизу ( это я про отступы ссылок подменю).

1 лайк
3

Спасибо, исправил:

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 #2c3e50;
}

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


}

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

 
  .main-menu > .active > a {
       background-color: #1abc9c;
         border-bottom: 2px solid #2c3e50;
       
               
  }
 
  .main-menu li li a {
      background: #ffffff;
      color: #2980b9;
          text-decoration: underline;
           padding: 5px 0 5px 15px;
           }