Испытание 15 , правильно ?

Курсы §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;
    }
      .main-menu ul
              {
                 
                  padding:10px 15px;
                  background:#ffffff;
                  }
    .main-menu li 
    {
        background:#2980b9;
    padding:0;
           border-bottom:2px solid #2c3e50;
        
        }
        .main-menu a
        {
           
            display:block;
            text-decoration:none;
            color:#ffffff;
            }
            .main-menu > .active > a
            {
               border-bottom:2px solid #2c3e50;
                background:#1abc9c;
                padding: 10px 15px;
                }
            
        .main-menu  > .active  > ul  > li 
            {
            
                border:none;
                background:#ffffff;
               text-decoration:underline;
                list-style:none;
                padding:5px 0px;
                }
               
                  .main-menu  .active  ul li  a
            {
                
                color:#2980b9;
                }
           .main-menu >li >a
           {
               padding: 10px 15px;
               }
2

С отступами напутали немного и маркеры не убрали.
.main-menu {
width: 200px;
padding: 0;
margin: 0;
list-style: none;
}
.main-menu ul {
padding:10px 15px;
background:#ffffff;
list-style: none;
}
.main-menu li {
background:#2980b9;
/padding:0;/
border-bottom:2px solid #2c3e50;
}
.main-menu a {
display:block;
text-decoration:none;
color:#ffffff;
padding: 10px 15px;
}
.main-menu > .active > a {
border-bottom:2px solid #2c3e50;
background:#1abc9c;
/padding: 10px 15px;/
}
.main-menu > .active > ul > li {
border:none;
background:#ffffff;
/text-decoration:underline;/
/* list-style: none;/
/padding:5px 0px;/
}
.main-menu .active ul li a {
color:#2980b9;
padding: 5px 0;
text-decoration: underline;
}
/ .main-menu >li >a {
padding: 10px 15px;
}*/
Запомните, что свойство list-style задается в целом списку, а text-decoration в данном случае ссылке, иначе цвет линии черный, а не синий как в образце (при проверке разница не отражается почему-то)

1 лайк
3

Спасибо, все понял) Исправил

4

Я бы еще селекторов в одном каскаде писал бы не более 3х, слишком длинно получается