Фоновое изображение за пределами поля на горизонтальных позициях li

Question

Я понимаю, что фоновые изображения не могут выходить за рамки элемента. Тем не менее, это мой случай:

У меня есть горизонтальный список, в котором каждый элемент списка должен иметь эффект наведения, где немного arraw находится поверх элемента. Простое позиционирование фона не будет работать, поскольку элементы списка имеют такой же высокий уровень, как текст. Все, что находится за пределами коробки, отключается.

Я прочитал о решении с дополнительным элементом внутри каждого элемента списка, который просто удерживает изображение.

Есть ли способ просто изменить высоту элемента списка, например. сделав ящик выше, чтобы фоновое изображение оставалось в коробке?

Answer 1

Это ответ, который вы ищете?

http://jsfiddle.net/fmpeyton/G5VVj/1/

HTML:

<ul> 
    <li><a href="#">Page1</a></li> 
    <li><a href="#">Page2</a></li> 
    <li><a href="#">Page3</a></li> 
    <li><a href="#">Page4</a></li> 
    <li><a href="#">Page5</a></li> 
</ul> 

CSS:

li{height: 50px; width:30px; margin:0 10px; float:left; list-style:none;} 
li:hover{background: url('http://www.dreamtemplate.com/dreamcodes/web_icons/gray-bold-up-arrow-icon.png') top center no-repeat;} 
a{padding:20px 0; display:block;} 

Стратегия должна иметь элемент внутри элемента и дать родительский элемент класса :hover псевдо, который изменяет фон при паре.