How to create a horizontal navigation in HTML/CSS above an image?

in my header I've got a large image. Above that image I want to place my navigation. The clue about it: The ul-Navigation-element got a gradi开发者_运维技巧ent background. But if I hover an li-Navigation-Link I would like to display the underlying image! (Hope that's clear? Otherwise I'll do some photoshop to demonstrate) This should be flexible, meaning not to give each li-Element a specific snippet form the backgroundimage.

I would prefer a JS-solution instead of a messy markup. But I appreciate every possible idea you have on your mind. Maybe I'm just overlooking the most obvious and easy solution..

Best regards (:

Here is an image of what I tried to descripe. Hope it helps: http://s7.directupload.net/images/110226/pv4v4c5r.jpg

There's no need for JS to do this, simply make it so that when you hover over the li-Navigation-Link, the element doesn't have a background attribute set.

This will create the 'transparency' that you want to achieve.

you can use background:transparent for a:hover. This will show the background.

(for internet explorer you could use filter:alpha(opacity=100) );

Here an example: http://jsfiddle.net/3C9sZ/2/

I just solved my problem with javascript/jquery. It can be found here http://jsfiddle.net/QwJKY/.