CSS Menu Hover Image Stretch

I have a simple horizontal menu which has <li> elements of different widths, 开发者_如何学Cwhen a user hovers over I would like to use the attached image to designate the hover, however I cannot work out the best way to do this.

the Image...

Can anyone post any code and suggest what I might need to do here.

Thanks

---

You would simply use the a:hover selector in your css, and add a background image. However, be aware, that stretching this image only works in modern browsers (IE9, Chrome, FF) that support CSS3.

---

This is how you make a menu;

http://jsfiddle.net/sg3s/49T6w/1/

When you style a menu it is important to make the anchors (a tags) display:block. That makes sure you have full power over their look and dimensions. Als if you use the anchors to make the menu it is backward compatible with older browsers that don't support :hover on block level elements (but do on anchors even if you make them a block since they're originally inline).

The background image is easy, just add it in the :hover class of the anchor. Gl