Nested UL Dropdown Menu being cut off

Question

I think I'm going to tear my hair out if I don't figure this out.

http://www.keystoneelderlaw.com/

If you highlight over Resources in IE 8, the dropdown box is cut-off. Normally this would be caused by an overflow: hidden property or something in higher up in the tree. But in this case, I don't understand what in the world is causing it. Any help?

I set the height on to 500px to make sure that wasn't impacting the problem. I'm at a loss.

Update: I solved the problem myself after hours of hair-pulling. Its a problem with IE Propietary filters. Read my own answer further down the page and you'll find a link to the issue in detail.

Answer 1

RESOLVED:

Evidentally, Internet Explorer propietary filters cause divs to act like they have "Overflow: hidden;" set even if you try to explicitly set them to "overflow: visible;".

I had a "filter:" gradient set the div and that was causing the problem. But its also been stated that alpha/opacity filters can cause the same behavior. The problem is described in detail with a hack here:

How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

I ended up just removing the filter completely and letting IE visitors not see a gradient. I hate hacks. They're not worth it.

Answer 2

In your css add property to #slide

#slide
{
 z-index:-999
}

Answer 3

it looks like your dropdown menu is being rendered behind your carousel, look into z-index and see if this can solve your problem (give the dropdown div's css a higher z-index that the carousel) http://www.w3schools.com/cssref/pr_pos_z-index.asp