No problem here (Firefox, Windows). If you still get the issue, assign Z-index to the DIVs to enforce a specific rendering order.
I tested the menu in Safari and it had the same problem as IE. I tried your suggestion, but I'm not exactly sure how to do it. I put the youtube code inside a separate div as you suggested. I then tried a number of different z-index values and couldn't get any of then to work. Here are the Z-index values for the horizontal menu:
ul.MenuBarHorizontal ul z-index=1020 Position: absolute
ul.MenuBarHorizontal iframe Z-index=1010 Position: absolute
I've tried the following values for the z-index for the div containing the youtube code: 900, 980, 990, 1030, 1040
I'm happy to say that an expert in the spry forum was able to solve my problem. For anyone wo comes across this same issue, the solution was one that I certainly would not have come up with. Here it is:
Go to Design view; select the video; in the properties panel select parameters; add the following parameter and value; parameter wmode, value=opaque. problem solved. You can see the end result by selecting multimedia, then videos on my site.