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?

/*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.*/

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.