css - Background image outside of box on horizontal li items -

i understand background images cannot go outside box of element. however, case:

i have horizontal list each list item should have hover effect little arraw sits atop item. positioning background won't work list items high text. positioned outside box gets cut off.

i read solution additional element within each list item holds image.

is there way change height of list item e.g. making box higher background image stay within box?

is answer looking for?

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;} 

the strategy have element within element , give parent element :hover pseudo class changes background when hovered.