How to make an image appear on top with rollover CSS

"...appear on top when rooling over the UL..." by this do you mean when mouse is over any element in you menu?

If so you may try a jQuery solution using some thing like $('#css3menu').hover(...);

Btw, when I move mouse over menu items I see JavaScript errors:

visibilite is not defined
https://www.joe-cool.co.uk/EN/home/home.cfm
Line 1

hideAll is not defined
https://www.joe-cool.co.uk/EN/home/home.cfm
Line 1

You can use Z-Index

Hi Sudraka,

Thanks for telling me about the javascript error, I will look into it.

There is a call <script>for Jquery, but I'm not sure on where to place the $('#css3menu').hover(...);

#Umartopia,

I'm really crap at CSS, and Z-index will have to be placed somwhere, and the image needs to be called too, which I'm really not knowing how.

Here is the line that could be used, I suppose :

ul#css3menu a:hover>*{
    display:block;

But from there, I don't have a clue on how to put a z-index.

THanks a lot to both
Adam

You can refer the following URL for Z-Index:
http://www.w3schools.com/Css/pr_pos_z-index.asp

to use the jQuery hover, you will need to enter the code in <script> tag just like you do with regular javascript.
more details on hover can be found here http://api.jquery.com/hover/

Sorry for got the code:

<script type="text/javascript" language="JavaScript">
//<![CDATA[

$(function(){

$('#css3menu').hover(
	function(){
	//code for mouser over (in) goes here,  for example: to display a tag with id="img55x55"
		$('#img55x55').show();
	},
	function(){
	//code for mouser out goes here,  for example: to hide the above image
		$('#img55x55').hide();
	}	
);

});

//]]>
</script>

Select allOpen in new window

Adam,

You do this using just html/css.  Create a div named whatever, then apply the following css

#whatever
{Display:none}

Ul li:hover #whatever
{display:block;
Position:relative;
Left:xxxpx;
Top:xxxpx;
Z-index:9999}

Hey

Sorry It took me so long to get back to you.

Great scripts, but I haven(t been clear enough.

Each button has got a different image, andif I applied or Javascript or CSS, then I'm stucked because it will only display one 'icon' and not a different one each time.

Any ideas ?

Thanks for sharing your knowledge.

Adam.