Задание простое, его можно решить легким путем создав раскрашенный список без ссылок, а можно решить чуть сложнее - создав полноценное меню. Мы пойдем путем чуть сложнее и создадим меню, раз учимся делать именно его, а в конце я в 2 словах расскажу в чем отличие от раскрашенного списка. Оба решения дают 100% результат.
Итак начнем.
Для начала разметим наш HTML-код: создадим неупорядоченный список с классом main-menu, добавим 6 элементов списка к которым добавим якорные ссылки, а второму элементу списка, который у нас подсвечен бирюзовым цветом, еще и зададим класс active. В итоге получаем такой код:
<body>
<ul class="main-menu">
<li><a href="#courses">Курсы</a></li>
<li class="active"><a href="#demo">Демонстрации</a></li>
<li><a href="#users">Участники</a></li>
<li><a href="#achievement">Достижения</a></li>
<li><a href="#profile">Профиль</a></li>
</ul>
</body>
Теперь перейдем к оформлению. Начнем с нашего контейнера списка:
.main-menu { width: 200px; margin-top: 14px; padding: 0; list-style: none; }
Верхний марджин у меня почему-то вышел не кратный 5, как сказано в описании задания.
Теперь оформим наши внутри меню с учетом правила хорошего тона 
т.е. прямо указав на них.
По порядку: убираем подчеркивание, задаем цвет текста, цвет фона, рамку снизу, режим отображения и отступы.
.main-menu a {
text-decoration: none;
color: #ffffff;
background-color: #2980b9;
border-bottom: 2px solid #2c3e50;
display: block;
padding: 10px 15px;
}
Завершающий штрих! Оформим наш активный пункт меню:
.main-menu .active a {
background-color: #1abc9c;
border-bottom: 2px solid #2ecc71;
}
Готово! Задание выполнено на 100%. Как всегда буду рад услышать комментарии как можно улучшить код, сделать семантически правильнее или увидеть допущенные ошибки. От легкого способа отличие лишь в том, что можно не добавлять ссылки, а просто задать стили для пунктов списка li, но таким образом у нас получится не меню, а просто раскрашенный список, по-этому я решил добавить ссылки.
Спасибо за внимание.