Menu overlay positioning issue with IE

Question

I've got a flyout menu on a site that I'm building. I'm using a UL nested within the LI. In Firefox it's working beautifully but IE breaks it. (The Pants & Shorts link is the only one with a flyout so far)

Here's the site (a work-in-progress so it's not quite all there): http://epalla.com/bogeypro/featured/covert-cooler.html

If I set:

.bogeypro_catmenu ul li {
position: static;
}

the submenu does become visible in IE, but in IE6 it flys at the top of the page (absolute positioning is NOT relative to the LI) and in IE7 it still doesn't fly above the product image.

any ideas?

Answer 1

have you seen suckerfish menus? http://www.htmldog.com/articles/suckerfish/dropdowns/

Answer 2

As it turns out, IE7 was taking a dump over the opacity filter. I started from scratch and redid everything from the ground up. I had it working beautifully in both browsers and was wondering what I'd done differently - then I added the opacity filters back in and voila, duplicate results.

I've removed the IE opacity line (below) and all is working beautifully

filter:alpha(opacity=92);