Данный код поможет раскрасить скучное меню навигации
Все изменяемые параметры подписанны в виде подсказок, последнюю структуру редактируем по аналогии с первой.
Автор: Freeff.ru

Код вставлять в HTML - низ или верх

Код:
<style>
#pun-navlinks a{
 padding: 4px 4px; /*Внутренние отступы*/
 margin: 1px 4px; /*Наружние отступы*/
 color: #969E8D; /*цвет ссылки*/
 border-bottom: 1px dotted #96BF1F; /*Ширина границы, стиль и цвет*/
}

#pun-navlinks a:hover{
 background-color: #96C11F; /*цвет фона при наведении*/
 color: #fff; /*цвет ссылки при наведении*/
 -moz-transition: background-color 0.01s;
 -webkit-transition: background-color 0.01s;
 -o-transition: background-color 0.01s;
 transition: background-color 0.01s;
}

#pun-navlinks a{
 color: #969E8D; 
 padding: 4px 4px;
 margin: 1px 4px;
 border-bottom: 1px dotted #96BF1F;
 -moz-transition: background-color .3s ease-in;
 -webkit-transition: background-color .3s ease-in;
 -o-transition: background-color .3s ease-in;
 transition: background-color .3s ease-in;
}
</style>