Drop Down menu not working with z-index

I'm going crazy.

The Site: http://www.newcovenant-th.org/

It's my Church's website and I'm needing to add more content but the setup doesn't allow. Rather than redesign the website I decided to try and replace the links in the blue bar at the top with a css drop down menu. I tried a few things and couldn't get it to work and came to the conclusion that I needed the content in divs to allow for z-index.

I broke up the old content (organized into tables) and stuck it in divs and gave each an appropriate z-index. The links section has the highest z-index however, it displays under the content in the main window under it. The content is housed in an iframe . . . is that the problem?

I'm pulling my hair out here and I'm kind of on a time clock. Does anyone have a solution or ideas that might work as well as the drop down menu?

Anyone? Lol maybe I'll just do flash.

Anyone? Lol maybe I'll just do flash.
You could try a list.
Look at my "Sources" page. Look at the code. It's all there, CSS as well.

http://exitfegs.co.uk/Sources.html

View source.


Frank

Ok well . . . I have a menu system that, while ugly, functions just not entirely properly. When you hover over media, the sub menu pops under the the div below it. There are 3 real divs

1.) Header z-index: 3
2.) Links (on top of header) z-index: 4
3.) Content z-index: 3

Any idea why the menu items in the links sections (which have a z-index of 500) pop under the content div?

Also, in IE, the menu doesn't even show up when you hover over the top parent (media).

Any help is greatly appreciated.

Solved

Solved
Why not tell us how you solved it so that we can all benefit.

Frank