Vertical CSS menu clashing with overflow:hidden?

Having some problems with a site I'm developing for a friend. I've been using a premade CSS-only vertical menu.

This have been working fine until I recently added height-scalable divs, http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm.

The menu still works, but somehow it expands beneath the content divs. I'm guessing this开发者_如何学JAVA has something to do with the overflow value, but I haven't been able to find any solution. Worth to mention is that the menu works fine in IE8, but not in Firefox or Safari. Since the CSS is somewhat extensive I'm adding links rather then sample code - hope that's okay.

Thanks in advance! :)

The site is at http://dev.velkos.no/exigo, the CSS for the site and the menu can be found by adding /CSS (due to my newbie status here at Stackoverflow I can't post any more links).

Adding position: relative and z-index: -1 to .container2 fixes it in Firefox/Chrome, and it doesn't change anything in IE8.

Doesn't work properly - see comments.

Attempt #2 :)

Tested in Firefox, Chrome, IE8.

• Remove my previous attempt. On .container2, remove: position: relative / z-index: -1.
• On #menuh-container, add: position: relative and z-index: 501 (one more than the z-index value on #menuh ul ul).

That fixes Firefox/Chrome, but breaks IE.

Now to fix IE..

The only way I could find to do this was to remove the filter rule from #menuh-container. Literally, removing the filter fixes it, adding it back in breaks it.

I'm hoping that your site still looks acceptable to you in IE8 without the filter rule.

It looks like this in IE7: