z-index image on top of css menu a:hovers not working

Hi,

I've pasted in a css flyout menu and then stacked a png image over the top of it so that the image looks a bit like a border around the menu. You can go here (http://www.adopt-a-patient.110mb.com) to see the result. The image/menu in question is down at the bottom left of the big rounded rectangle.

I did this using z-index.

The image is in a containing div and the menu elements are inside that div.

The container for the content of the page has a z-index of -500. The menu container has a z-index of -20 and the sub container to set the image on the menu has no z-index. This set-up shows the elements in the way I described above, with the menu stacked between the background of the main content div and the smaller container holding the image that I want placed over the menu.

However, with this set up the a:hovers on the menu are not working. I also noticed that the menus on other parts of the page are not working either, because I put a -500 index on the content container, so that the a:hovers are behind that image now, even though the images are still visible. The links are not only not clickable, but they don't even register at all. Unfortunately I could not find a way to stack the image on the menu withuot giving the main bckground image a - z-index. Perhaps there is a way around that, too?

I'll post the relevant code below.



/*this is the big rounded rectangle which everything fits on to.*/
#containerINDEX {
position:relative;
width:882px;
height:1617px;
margin-right:auto;
margin-left:auto;
background-image:url(plainINDEXj.jpg);
background-repeat:no-repeat;
border:1px solid transparent;
z-index:-500;
}

/*this is the div holding the image which I want to put on top of the menu*/
#flycontainer {
position:absolute;
height:335px;
width:420px;
margin-top:70px;
padding-right:100px;
background-image:url(flyoutart1.png);
background-repeat:no-repeat;
}

/*this is the menu code which I want to place between the main background image and the #flycontainer image.*/

.menu {font-family: arial, sans-serif; width:106px; height:150px; position:absolute; margin-left:40px;top:180px; font-size:11px;z-index:-20}

.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:114px; height:20px; padding-right:10px; text-align:right; border:1px solid black; background:#c9c9a7; line-height:19px; font-size:11px;}

.menu ul {padding:0; margin:0;list-style-type: none; }

.menu ul li {float:left; margin-right:1px; position:relative;}

.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:red; background:#b3ab79;}

.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}

.menu ul li:hover ul li ul {display: none;}

.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#000; width:150px; height:110px; margin-top:10px; margin-left:10px;padding:10px;}

.menu ul li:hover ul li a:hover {background:#dfc184; color:#000; height:110px;}

<!--HTML-->
<div id="flycontainer">
<div class="menu">

<ul>
<li><a href="#1">Link1</a>

<ul>
<li><a href="#1" title="title">explanation</a></li>

</ul>

</li>

<li><a href="#2">Link2</a>

<ul>
<li><a href="#2" title="title">explanation</a></li>

</ul>

</li>

<li><a href="#3">Link3</a>

<ul>
<li><a href="#3" title="Title">explanation</a></li>

</ul>

</li>

<li><a href="#">Link4</a>

<ul>
<li><a href="#4" title="title">explanation</a></li>

</ul>

</li>

<li><a href="#5">Link5</a>

<ul>
<li><a href="Link5" title="title">explanation</a></li>


</ul>
</li>
</ul>
</div>
</div>

Z-indeces are all relative to their parent elements so unfortunately you can't do what you are trying to do. You have basically placed the menu "under glass" and now, though you can still see it, you can't get to it.

There isn't really any direct solution for this problem. You can try to make your <ul> background use that same image and position it accordingly.

Maybe something like this:
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:absolute; margin-left:40px;top:180px; font-size:11px;/*z-index:-20*/}

.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:114px; height:20px; padding-right:10px; text-align:right; border:1px solid black; /*background:#c9c9a7;*/ line-height:19px; font-size:11px;}

.menu ul {
list-style-type:none;
margin:0;
padding:0;
}


.menu>ul {
background-color:#C9C9A7;
background-image:url(/images/flyoutart1.png);
background-position:-40px -180px;
height:110px;
list-style-type:none;
margin:0;
padding:0;
width:126px;
}

Otherwise just set the <ul>'s background to transparent. In either case you'll just have to live with the borders not being behind the image.