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

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

У меня не получается выше 95%, что не так подскажите пожалуйста?

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

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:15px 0 0 0;
width:200px;

}

.main-menu li {
list-style:none;
background:#2980b9;
border-bottom:2px solid black;
padding:10px 15px;

}

.main-menu a {
text-decoration:none;
color:white;

}

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

2

border-bottom:2px solid black; Исправьте цвет: значение смотрите в задании к испытанию.

.main-menu {
padding:0;
margin:15px 0 0 0;
width:200px;

}

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

Вы получите 100%, но испытание будет выполнено не совсем корректно.
Повторите – display: block; и примените его к ссылкам.
https://htmlacademy.ru/courses/50/run/6

1 лайк
3

Огромное спасибо Valery_S,
учел ваши замечания.

4

К прохождению испытания напрямую это не относится – но для усваивания пройденного материала попробуйте добавить :hover, как это сделано в предыдущем задании:
https://htmlacademy.ru/courses/50/run/8

…в дальнейшем это пригодится…

1 лайк
5

вы мне очень помогли вот что я намалевал, спасибо :slight_smile: https://jsfiddle.net/y64hj82j/8/

6 
.main-menu a {
text-decoration:none;
color:white;
display:block;   
outline: 1px solid;       /* добавьте временно */
}

… и посмотрите на ссылки при наведении.
Область ссылок можно увеличить, если padding применять не в теге li, а в теге а

Можно вообще все свойства из .main-menu li перенести в .main-menu а…

1 лайк
7

Valery_S наверное я вам надоел на вот https://jsfiddle.net/y64hj82j/10/ . Перехожу на вертикальное меню. Спасибо.

8

Чего-то не то… Вы проверяли как это выглядит и работает?

9

Поспешил и ошибся, но все исправил еще раз спасибо https://jsfiddle.net/y64hj82j/11/