Испытание: вертикальное меню 9/28 нужна критика

Курсы §13. Мастерская: создаём меню
1

Прошел испытание на 100% но немного сомневаюсь в правильности своего кода

Испытание: вертикальное меню
  • Курсы
  • Демонстрации
  • Участники
  • Достижения
  • Профиль

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 li{

list-style: none;




}

.main-menu li:nth-child(1){
position: relative;
left: -50px;
color: white;
background: #2980b9;
padding-top: 10px;
padding-left: 15px;
padding-bottom: 10px;
width: 185px;

margin: 10px;
border-bottom: 2px #2c3e50 solid;


}

.main-menu li:nth-child(2){

position: relative;
left: -50px;
top: -10px;
color: white;
background: #1abc9c;
padding-top: 10px;
padding-left: 15px;
padding-bottom: 10px;
width: 185px;
margin: 10px;
border-bottom: 2px solid #2ecc71;

}

.main-menu li:nth-child(3){

position: relative;
left: -50px;
top: -20px;
color: white;
background: #2980b9;
margin: 10px;
padding-top: 10px;
padding-left: 15px;
padding-bottom: 10px;
margin-left: 10px;
margin-right: 30px;
border-bottom: 2px solid #2c3e50;


}

.main-menu li:nth-child(4){

position: relative;
left: -50px;
top: -30px;
color: white;
background: #2980b9;
padding-top: 10px;
padding-left: 15px;
padding-bottom: 10px;
margin-left: 10px;
margin-right: 30px;
border-bottom: 2px solid #2c3e50;


}

.main-menu li:nth-child(5){

position: relative;
left: -50px;
top: -40px;
color: white;
background: #2980b9;
padding-top: 10px;
padding-left: 15px;
padding-bottom: 10px;
margin: 10px;
margin-left: 10px;
margin-right: 30px;
border-bottom: 2px solid #2c3e50;


}
2

Думаю, что вам стоит вернуться к теории заданий перед испытанием (пункты 1-8).
Всё плохо, к сожалению.

1 лайк
3

.main-menu li {

display: block;
padding: 10px 15px;
color: white;


}

.main-menu li{

background: #2980b9;
border-bottom: 2px solid #2c3e50;
margin-left: -40px;
margin-right: 80px;


}

.main-menu .active {

background: #1abc9c;
border-bottom: 2px solid #2ecc71;

}

переделал так лучше?

4

один селектор не заметил одинаковый уже удалил его

5

Немного.

Почему не обнуляете отступы по умолчанию списка ul?
Все еще отсутствуют ссылки и стили для них. Это же меню, подумайте.

6

в этом испытании нет ссылок так бы добавил

7

В пунктах 1-8 тоже меню без ссылок было?

8

.main-menu a{

color: white;
text-decoration: none;

}

так еще лучше?

9

HTML-код не вижу, так что не могу сказать, насколько лучше.

10
11

Кнопка для форматирования кода </> в редакторе сообщений.

12 
    <ul class="main-menu">
    <li><a href="course">Курсы</a></li>
    <li class="active"><a href="#demonstration">Демонстрации</a></li>
    <li><a href="#members">Участники</a></li>
    <li><a href="#achievments">Достижения</a></li>
    <li><a href="#profile">Профиль</a></li>
    </ul>
13

Это всё тоже для ссылок.

Не хватает # в адресе ссылки.
Покажите окончательный вариант сss-кода, который у вас получился.

14 
  <ul class="main-menu">
    <li><a href="#course">Курсы</a></li>
    <li class="active"><a href="#demonstration">Демонстрации</a></li>
    <li><a href="#members">Участники</a></li>
    <li><a href="#achievments">Достижения</a></li>
    <li><a href="#profile">Профиль</a></li>
    </ul>

.main-menu .active {

background: #1abc9c;
border-bottom: 2px solid #2ecc71;

}

.main-menu a{
padding: 10px 15px;
display: block;
text-decoration: none;
color: white;

}

.main-menu{

padding: 0;


}

.main-menu li{

background: #2980b9;
border-bottom: #2c3e50 2px solid;
width: 200px;
list-style: none;


}
15

Обычно задают для ul. Других замечаний нет.