Пройдено на 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%


#6

Разве не надо делать появление подменю, при наведении мышью на верхний пункт?


#7

Нет, в этом испытании не нужно!

Но, могу предложить один из вариантов…

Меню с выпадающим подменю
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;
    margin: 0;
    padding: 0;
    list-style: none;
}    

.main-menu a {
    display: block;
}

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

.main-menu > li > a:hover {
    background: #1abc9c;
}

.main-menu .active > a {
    /*background: #1abc9c;*/
}

.main-menu ul {
    display: none;
    margin: 0;
    padding:10px 0;
    list-style: none;
    background: #fff;
    border-bottom: 2px solid #2c3e50;
}

.main-menu .active:hover ul {
    display: block;
}

.main-menu ul a {
    color: #2980b9;
    padding: 5px 0 5px 15px;     
}

.main-menu ul a:hover {
    text-decoration: none;
}

#8

91%. Дайте несколько советов. В чем основные ошибки?

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 a {
display: block;
color: #ffffff;
background: #2980b9;
border-bottom: 2px solid #2c3e50;
text-decoration: none;
list-style: none;
padding: 10px 0 10px 15px;
}

.active a {
background: #ffffff;
border: none;
color: #2980b9;
}

.active li {
list-style: none;
text-decoration: underline;
}

.active > a {
background: #1abc9c;
border-bottom: 2px solid #2c3e50;
color: #ffffff;
}

.main-menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 1.2;
border-bottom: 2px solid #2c3e50;
}