горизонтальное меню с эффектом анимации

Доброго времени суток, друзья. Очередное горизонтальное меню с эффектом анимации. С виду совершенно простое, а при наведении на пункты менюшки получаем выделение цветом в виде полукруга. 

Немного напоминает вариант меню с zoom - эффектом, которое прижилось на некоторых блогах читателей.

Вы можете посмотреть меню в работе. Скопируйте код и установите в этом редакторе.

<style type="text/css">
.exespotlightmenu{
width: 100%;
overflow:hidden;
}
.exespotlightmenu ul{
margin: 10;
padding: 0;
font: bold 14px Verdana; /* стили текста */
list-style-type: none;
text-align: center; /* можно "left", "center", или  "right" */
}
.exespotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* отступы справа */
}
.exespotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* горизонтальный диаметр  */
height:50px; /* вертикальный диаметр */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 анимация */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.exespotlightmenu li:hover a{
color: white;
background: #a71b15; /* цвет при наведении */
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.exespotlightmenu li a exespan{
position:relative;
top:35%; /* смещение текста в низ, чтобы он располагался по центру*/
}
</style>
<div class="exespotlightmenu">
<ul>
<li><a href="##########"><exespan>Главная</exespan></a></li>
<li><a href="##########"><exespan>Об авторе</exespan></a></li>
<li><a href="##########"><exespan>Форма связи</exespan></a></li>
<li><a href="##########"><exespan>Инструменты</exespan></a></li>
<li><a href="##########"><exespan>Контакты</exespan></a></li>
</ul>
</div>

Настройки стандартные и все закомментированы в коде. Сложности не возникнет. 

Вместо "##########" вставляйте адреса страниц, куда будет осуществлён переход при клике. 

Меняйте background: #a71b15;  цвет под дизайн вашего блога.

По необходимости добавляйте или убирайте пункты горизонтального меню - <li><a href="##########"><exespan>Главная</exespan></a></li>

В Блоггере код меню устанавливаем в гаджет HTML/JavaScript и перетягиваем его под шапку блога или над сообщениями. 

Вот и всё. До встречи.