How to display a background image with a:hover

http://jsfiddle.net/gUckp/

I开发者_如何学运维n the above demo, I'd like to show an orange round image BELOW the center of menu item when it is hovered.

However I am not able to show all the image. The bottom is cut.

How can I do it with CSS?

Thanks in advance.

When using display:inline; on the li items, the height attribute you've given is ignored. Put the :hover on the li items istead of the a tags and it works. The height and line-height you've used becomes superfluous.

Updated jsfiddle

Your a tag needs a block specification.

See: http://jsfiddle.net/gUckp/16/.

Note the line display: inline-block; for the #nav a class.

The reason for the image not displaying correctly in your sample is because it was being placed outside of the a tag rendered block size.

EDIT

Firebug helps tremendously in resolving these types of issues. It allows you to inspect elements etc. I'd suggest adding it to your development toolkit.

background: #01291e url(http://demo.chevereto.com/images/hoverorang.png) no-repeat 50%;

See the updated jsfiddle.

Edit: O sorry, that's not what you asked for. Will try again... ;)

Edit 2: Hereby the correct one.

Edit 3: Or this one with a nicer focusrect size. Enjoy!