Problems with drop down menus over playing HTML5 v

问题:

I'm having some issues getting a drop down menu (jQuery) to work on top of playing HTML 5 video. When the video hasn't started playing yet, like when one first loads the page, it's fine. However, once the video starts playing, and even after it gets paused, the drop down menus above the video start getting jumbled in Safari, and in Chrome, the text isn't there at all. In Firefox, the text displays as it should over playing video.

The code for the header is in a php file above an iframe, which is playing the video. So the header extends down through the iframe, while staying on top.

Here are some screenshots to see what I'm talking about (Stack Overflow wouldn't let me post the images directly but here are the links):

FIREFOX

http://oi41.tinypic.com/qpm16a.jpg

If you need to see the code, here's a link to the page where you can view the source:

http://filmlook.com/e_website/

(I couldn't post more links or images because of noob status, but you can check the site out for yourself to see what the problem is.)

Obviously, I'd like to keep the code mostly intact, but if there's another menu system I could use that could work better or any other options, I'll hear everything.

Also, I am kind of a noob with code, too, so please try and explain your answers as best you can.

Thanks

回答1:

if i change manually the css property "display: none;" to "display: block"; it even works in chrome with the overlay. i see you are using an effet to show your dropdowns. have you tried it without that?

so just simply change your display and check if that works.