Changing Z-index whit a:hover?

Can I change the z-index of a layer by hovering?

[Ridiql]

Title more or less says it.

Can I have a layer increase it's z-index when I hover with the mouse over it?

I'm trying to do this dropdown menu of my own and I want to do it this way for now.

html:
<div id="MenuHome" align="center"><a>Home</a>
css:
#MenuHome{
position:absolute;
width:130px;
height:100px;
background-color:#663;
z-index:2;
left:0px;
top:0px;
visibility:visible;
}
#MenuHome A:hover{
z-index:5;
}

Am I doing this the wrong way? So far it doesn't work.
I'm pretty much a rookie in both html and css.
Thanks for any help!

[frattaroli]

If you can hover over it, that means it's already visible. What are you trying to do?

[Ridiql]

Hi frattaroli

Actually, only parts of it is visible, half of it is hidden beneath another layer with a higher z-index. So I want to make this entire layer show when I hover over it by increasing it's z-index.

[frattaroli]

To be honest, I'd just use a simple javascript line:

<a onmouseover="javascript:this.style.zIndex = 5;">Home</a>

or if that doesn't work 'cause it doesn't acknowledge the "this", try:

<a id="aHome" onmouseover="javascript:document.getElementById("aHome").style.zIndex = 5;">Home</a>

I'm sure we could mess around with CSS all day and figure it out, but at least you have a temp solution now.

[Ridiql]

I tried both onmouseover-scripts but none of em worked. I have no idea why, but frankly I'm giving up on my quick'n'easy homemade way of creating a dropdown menu.

I'll probably be posting a new thread soon where I'll need more help, stay tuned ^^