Попробуйте удалить экран inline
с <li>
и использовать вместо него float:left
.
Попробуйте: http://jsfiddle.net/RGvjj/1/
#navigation li {
font-size: 20px;
margin-left: 10px;
padding-left: 10px;
border-left: 3px solid #1161A5;
color: #ffffdd;
text-decoration: none;
float:left;
}
РЕДАКТИРОВАТЬ: Чтобы объяснить, я предполагаю, что это происходит, потому что, когда вы анимируете элемент, jQuery изменяет display
на block
.Итак, вы получили элемент block
(<a>
) внутри элемента inline
(<li>
), который не работает.
Используя float:left
, <li>
сохраняет свой дисплей block
, что делает для <a>
значение block
.
.