Испытание: Вертикальное меню [9/28] 100%, что за...

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

На сколько адекватен код ?
и что за бордер боттом под демонстрацией?) к чему его красить ?

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

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: 150px;
list-style: none;
padding: 0;
margin-top: 14px;

}

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

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

2

Обратите внимание, что ширина .main-menu у вас по коду получилась меньше чем ширина ссылок. Это нелогично.
Если на кратность пяти не обращать внимания, то больше замечаний нет.
Не могу понять, почему вас удивляет оформление активного пункта меню. Такой дизайн - активный пункт выделен не только отличным от основного фоном, но и рамкой другого цвета.

3

ширина осталась,когда рассчитывал как и что буду делать , прикидывал рамки и тд. забыл о ней.
а по завершению,в идеале, эту ширину из меню , можно удалить ? или выставлять как у ссылок?
т.к. , в двух случаях - изменений не происходит. или это - особенность эмулятора текст. редакторов и мини-браузера ?)

4

Оставляйте ширину только у ссылок, а в идеале и ширина ссылок должна определяться только отступами. То есть ширину не надо писать вообще.

1 лайк