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

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

HTML:
< !DOCTYPE html>
< html lang=“ru”>

< meta charset=“utf-8”>
< title>Испытание: вертикальное меню< /title>
< /head>
< body>
< ul class=“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;
}

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

.menu li {
background: #2980b9;
}

.menu li a {
text-decoration: none;
display: block;
border-bottom: 2px solid #2c3650;
padding: 10px 15px;
color: #ffffff;
}

.menu .active a {
background: #1abc9c;
border-bottom: 2px solid #2ecc71;
}
Получается на 99%. Где у меня ошибка?

2

Я бы добавил псевдокласс :hover к ссылкам.

3

You can check this out… http://www.skptricks.com/2018/02/vertical-navigation-or-menu-bar-using-css.html?m=1

1 лайк
4

Спасибо! Ошибка была в цвете.

5

а для чего? в плане, для реального сайта - да, нужно, но образец в задании статичен…

<body>
   <ul class="main-menu">
    <li>
        <a href="#">Курсы</a>
    </li>
    
     <li id="demo">
         <a href="#">Демонстрации</a> 
     </li>
    
    <li>
        <a href="#">Участники</a>
    </li>
    
    <li>
        <a href="#">Достижения</a>
    </li>
    
    <li>
        <a href="#">Профиль</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 {
list-style: none;
padding: 0;
width: 200px;

}

.main-menu li {
background: #2980b9;

}

.main-menu a {
text-decoration: none;
display: block;
border-bottom: 2px solid #2c3e50;
padding: 10px 15px;
color: white;
}

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

6

а для себя!?!

7

Я и сказал, для сайта - однозначно, то есть и для себя. Но в задании образец статичный…