Еще один аналогичный вариант, только здесь не идет класс, если поставить, то будет эффект по всему сайту. Или также можно выставить под именно тот каталог, под который вам нужно. Создайте анимированное наведение курсора на CSS для более уникального наведения, чем скучные браузеры по умолчанию только с CSS.
Это довольно простой, но эффективный визуальный эффект для основной навигации, где размер и пробел можно легко изменить с помощью отступов и полей.
Анимированные Hover подчеркивание
HTML
Код
<ul>
<li><a href="#">Zornet.Ru</a></li>
<li><a href="#">Скрипты</a></li>
<li><a href="#">Шаблоны</a></li>
<li><a href="#">Дизайн</a></li>
</ul>
CSS
Код
ul {
margin: 85px auto 0;
padding: 0;
list-style: none;
display: table;
width: 750px;
text-align: center;
}
li {
display: table-cell;
position: relative;
padding: 20px 0;
}
a {
color: #f9f6d1;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.20em;
display: inline-block;
padding: 17px 15px;
position: relative;
}
a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #e6e6e0;
transition: width 0.5s ease 0s, left 0.5s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
Демонстрация
