Пройдено на 100%. Мастерская: создаём меню / Испытание: многоуровневое меню [15/28]


#1

Доброго времени суток всем.

Хотел бы получить обратную связь от опытных разработчиков, по логике и качеству кода.

Заранее благодарен всем.


#2

выводит 94%

.main-menu {
width: 200px;
padding: 0;
margin: 0;
list-style: none;
}

.main-menu > li {

border-bottom:3px solid #2c3e50;
margin-bottom: -1px;

}

.main-menu a {
display: block;
padding: 10px 14px;
text-decoration: none;
color: #0088cc;

}

.main-menu a:hover {
background: #f5f5f5;
}

.main-menu > .active > a {
color: white;
background: #1abc9c;
}

.main-menu ul {
margin: 0;
padding: 10px 0;

list-style: none;

}

.main-menu li li a {
padding: 5px 0;
padding-left: 35px;
text-decoration: underline;
position:relative;
right:20px;
color: #2980b9;
}
.main-menu li ul{
background:#ffffff;
border-top:2px solid #2c3e50;}

.main-menu li li a:hover {
text-decoration: underline;
background: none;
}
.main-menu> li >a{
color:#ffffff;
background:#2980b9;}


#3

Выводит 94%, потому что Вы не учли условий задания:

  1. Все отступы кратны “5”. А у Вас уже в .main-menu a {padding: 10px **14**px;} - это во-первых;
  2. Толщина рамок у пунктов меню - 2px (у Вас в .main-menu > li {border-bottom: **3**px solid …;}) - это во-вторых;
  3. И после этих преобразований абсолютно бессмысленен отступ “минус 1px” в том же .main-menu > li. Это в-третьих
    Вот Ваши потерянные 6%.

#4

Вывело 100%, но не исключено, что есть ошибки.

.main-menu {
width: 200px;
padding: 0px;
margin: 0px;
list-style: none;
}

.main-menu > li {
border-bottom: 2px solid #2c3e50;
}

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

.main-menu > .active > a {
background: #1abc9c;
color: white;
}

.main-menu > .active > ul {
padding: 10px 0px;
}

.main-menu ul {
margin: 0;
padding: 0;
list-style: none;
}

.main-menu li li a {
padding: 5px 0;
padding-left: 15px;
background: white;
color: #2980b9;
text-decoration: underline;
}

.main-menu li ul {
background:#ffffff;
border-top:2px solid #2c3e50;
}


#5

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 {
padding: 0;
margin: 0;
width: 200px;
}

.main-menu .active > a {
background-color: #1abc9c;
text-decoration: none;
display: block;
padding: 10px 15px;
color: #fff;
border-bottom: 2px solid #2c3e50 ;
}

.active ul {
background-color: #fff;
padding: 10px 15px;
border-bottom: 2px solid #2c3e50 ;
}

.active ul li {
list-style: none;
padding: 5px 0;
}

.active ul li a {
text-decoration: underline;
color: #2980b9;
}

.main-menu > li > a {
text-decoration: none;
background-color: #2980b9;
color: #fff;
display: block;
border-bottom: 2px solid #2c3e50;
padding: 10px 15px;
}

100%