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

Курсы §13. Мастерская: создаём меню
1 
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: вертикальное меню</title>
    </head>
    <body>
        <ul class="menu">
            <li>Курсы</li>
            <li class="demo">Демонстрации</li>
            <li>Участники</li>
            <li>Достижения</li>
            <li>Профиль</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;
}

.menu {
list-style: none;
width: 200px;
padding: 0;
}

.menu li {
border-bottom: 2px solid #2c3e50;
padding: 10px 15px;
background: #2980b9;
color: #ffffff;

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

2

Где стили для ссылок?

3 
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: вертикальное меню</title>
    </head>
    <body>
        <ul class="menu">
            <li><a href="#">Курсы</a></li>
            <li class="demo"><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;
}

.menu {
list-style: none;
width: 200px;
padding: 0;
}

a {
text-decoration: none;
color: #ffffff;
}

.menu li {
border-bottom: 2px solid #2c3e50;
padding: 10px 15px;
background: #2980b9;
}
.menu .demo {
background: #1abc9c;
border-bottom: 2px solid #2ecc71;
}

4

Хотя бы так…

5

а как еще можно?

6

Еще эти стили для ссылок, например.

7

это у меня для li стоит. получилось одно и тоже, только в другом месте

8

Не совсем одно и то же. Задавая внутренние отступы именно ссылке вы увеличиваете площадь для клика по ней.

1 лайк
9

ясно. спасибо.

10

display: block; применять будем?

11

а надо?

12

Желательно. Для удобства пользователей.
В противном случае у Вас ссылка будет открываться только при наведении на текст, а пространство вокруг к ссылке относиться не будет.
https://htmlacademy.ru/courses/50/run/6

2 лайка
13

спасибо, учту. я нажимаю на саму ссылку а не на место рядом с ней. хотя