Проблема с навигацией

[WEB-best]

Вот макет.  http://s019.radikal.ru/i602/1312/c7/0b4cb754ece3.png
проблема такая, у меня знаний не очень много, но застрял на верхней навигации, как мне сделать чтобы при наведении цвет менялся на весь бок li, а не на фоне текста ?
вот исходники http://jsfiddle.net/tHKt7/1/

[xanthonyx]

http://jsfiddle.net/anthonydev/tHKt7/2/

[WEB-best]

  On 12/3/2013 at 1:50 PM, xanthonyx said:

http://jsfiddle.net/anthonydev/tHKt7/2/

Спасибо, большое, только я так и не понял своей ошибки

[xanthonyx]

У вас "padding" был применен к тегу "li".

Я переопределил тег "a" из инлайнового по умолчанию, в блочный, задал padding слева, padding справа

ну и выровнял текст ссылки по вертикали с помощью "height: 79px; line-height: 79px"

исходя из того, что высота '<div class="header-line">...</div>' 79px.

 

Плюс еще избавился от '<div class="header-line-2"></div>', так как он тут излишний элемент.

Вместо него назначил  "border-bottom: 10px solid #BD2D30;" диву с классом "header-line".
 

Edited December 3, 2013 by xanthonyx

[WEB-best]

  On 12/3/2013 at 2:09 PM, xanthonyx said:

У вас "padding" был применен к тегу "li".

Я переопределил тег "a" из инлайнового по умолчанию, в блочный, задал padding слева, padding справа

ну и выровнял текст ссылки по вертикали с помощью "height: 79px; line-height: 79px"

исходя из того, что высота '<div class="header-line">...</div>' 79px.

 

Плюс еще избавился от '<div class="header-line-2"></div>', так как он тут излишний элемент.

Вместо него назначил  "border-bottom: 10px solid #BD2D30;" диву с классом "header-line".

 

Спасибо