hover and z-index

[fierdor]

I have a horizontal menu with background images for the anchor elements.

On hover I am changing my background image which is slightly more than the size of the image in the static state..

So I want this image to be on top...

However the code does not seem to work..

My hover image appears but the extra part remains hidden behind the adjacent anchor's image..

 

 

#navmenu ul li a{	
background-image:url(../images/1.gif);
background-repeat:no-repeat;
text-decoration:none;
outline:none;
color:#000;
float:left;
margin-right:-18px;
width:100px;
display:block;
text-align:center;
padding:6px 11px;
display: inline;
font-size:12px;
text-indent:-8px;
}
#navmenu ul li a:hover{
background-image:url(../images/2.gif);
color:#fff;
z-index:6000;
}

 

<div id="navmenu">
<ul>
<li><a  href="index.php">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a  href="#">4</a>
<li><a  href="#">5</a>
</ul>
</div>

 

Is it like z-index wont apply to hover state?

[dimitar]

Can't really say much from your code, but if you really need to use z-index then you are missing a defined position for the element.

[fierdor]

Yes that did it!

Just added a position:relative

Thanks a lot!

Learnt a new thing..I didnt know that!