9/28 100%, проверьте, пожалуйста!

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

html,
body{
margin: 0;
padding: 0;
}

body{
width: 280px;
min-height: 280px;
padding: 10px;

font-size: 14px;
line-height: 1.4;
font-family: “Arial”, sans-serif;

background-color: #ecf0f1;
}
.main-menu{
padding:0;
margin: 1em 0;
background-color:#2980b9;
width:200px;
list-style: none;
}

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

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

2

На мой взгляд ошибок нет.

margin: 1em 0; можно не указывать – эти значения по умолчанию прописаны.

3

Cпасибо, в будущем постараюсь учесть :wink:

4

почему это нельзя добавить в .main-menu a ?

5

Можно,
и background-color тоже можно…

6

это грубая ошибка?

7

Ошибкой это не считается (как мне кажется).

Просто удобнее складывать все нужные свойства в одном месте – в данном случае в .main-menu a.
Если придётся что-то переопределить – не придётся искать эти свойства в разных классах.

8

Ясно спасибо!!

9

нельзя перенести в .main-menu a
вот, что получается… В “интенсиве” не убирается черная полоса снизу… Мне пришлось тоже его положить отдельно в .main-menu li

%D1%80%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA
рисунок.jpg1329×642 146 KB

10

Можно:

HTML 
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: вертикальное меню</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <ul class="main-menu">
            <li><a href="#">Курсы</a></li>
            <li class="active"><a href="#">Интенсивы</a></li>
            <li><a href="#">Профессия</a></li>
            <li><a href="#">Подписка</a></li>
            <li><a href="#">Профиль</a></li>
        </ul>
    </body>
</html>
CSS 
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;
    list-style: none;
    width: 200px;
}

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

.main-menu .active a {
    background: #1abc9c;
    border-bottom: 2px solid #2ecc71;
}