<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание: вертикальное меню</title>
</head>
<body>
<ul class="menu">
<li>Курсы</li>
<li class="active">Демонстрации</li>
<li>Участники</li>
<li>Достижения</li>
<li>Профиль</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{
width:200px;
margin:0px;
padding:0px;
list-style:none;
}
.menu li{
display:block;
background-color:#2980B9;
padding:10px 15px;
color:#FFFFFF;
border-bottom:2px solid #2C3E50
}
.menu .active{
background-color:#1ABC9C;
border-bottom:2px solid #2ECC71;
}