CSS / JavaScript Navigation Menu on top of Flash in Firefox

Question

My site has a drop-down menu built in CSS and JavaScript that drops down over a Flash animation. In IE (6&7) the drop-down menus drop over the Flash animation, however, in Firefox (2&3) the menus appear underneath the Flash animation. Is there any way to get this dynamic menu to flow OVER the Flash in Firefox?

In IE 7 menu appears over the Flash:

In Firefox the menu appears under the Flash: (How can I fix this?!)

Answer 1

Try setting wmode to transparent - see here

Answer 2

Use z-index and set the menu to something like 100 and the flash movie to something in the negative like.....say -1.

Cheers

Answer 3

wmode=opaque seemed to work for me

I did it here:www.toolgal.com, hover over the products menu on the top navigation

Dan

Answer 4

Have you tried the iframe trick (ie floating an iframe behind the menu, thus putting hte flash layers behind.)

Answer 5

The iframe-trick is only for IE (below IE7), so it probably would never help in Firefox.

I'd try to enable wmode=transparent, so that the Flash content won't get its own HWND

Answer 6

Enabling wmode=transparent is the way to go. But also note, that Firefox in Linux does not obey that, and the flash will always be on top.