проблема с :hover

[esoteric]

Всем привет !

Верстая PSD макет столкнулся с проблемой :hover ,а именно в менюшке.Нужно чтобы пробегая по ссылкам они подсвечивались при помощи :hover .Понимаю что логика вставить a:hover , но при этом варианте ,подсветка только высоты ссылки а мне надо во всю высоту рамки меню поэтому вставил li:hover , но получается фиксированная ширина и поэтому в длинных названиях лишек она обрезается.Как сделать чтобы подсветка охватывала полностью все названия по отдельносьти? И еще как можно это соорудировать напрямую a:link ?

Ссылки почему то в jsfiddle поехали вниз впритык рамки

https://jsfiddle.net/stvolkilla/0nxzedxz/1/

скриншот

[alex_web64]

li:hover {
  background: url(http://s20.postimg.org/afbzsu2mx/hover.png) repeat-x;
}

 

[esoteric]

6 hours ago, alex_web64 said:

li:hover {
  background: url(http://s20.postimg.org/afbzsu2mx/hover.png) repeat-x;
}

 

спасибо )

[by chris]

https://jsfiddle.net/0nxzedxz/2/

[Dlynnyj]

width: 100%;
white-space:nowrap;