HTML
<!DOCTYPE html>
<html>
<head>
<title>Испытание: вертикальное меню</title>
<meta charset="utf-8">
</head>
<body>
<ul class="main-menu">
<li><a href="kursy">Курсы</a></li>
<li class="active"><a href="demonstration"> Демонстрации</a></li>
<li><a href="participant">Участники</a></li>
<li><a href="achivments">Достижения</a></li>
<li><a href="profil">Профиль</a></li>
</ul>
</body>
</html>
CSS
html, body{
margin:0;
padding:0;
background-color:#FFFFFF;
}
body{
width:280px;
min-height:280px;
padding:5px;
font-family:Arial, sans-serif;
font-size:14px;
line-height:1.6;
background:#EAEAEA;
}
.main-menu {
width:200px;
padding:0;
margin:0px;
list-style:none;
background:#2980B9;
}
.main-menu a{
display:block;
padding:10px 15px;
margin-bottom:0px;
color:#FFFFFF;
text-decoration:none;
border:1px solid #2C3E50;
}
.main-menu .active a {
background:#1ABC9C;
border: 1px solid #2ECC71;
}