Drop Down Menu over FLV?

[kyleldi]

I've got this menu that has some drop down sections.. It works fine and all is well, but where it drops down it goes behind the video playing underneath it.  I've tried setting the Z-Index to 999, and the position is absolute, but it still goes behind the video.  Any ideas?  I've also set the vmode to transparent in the flash code as well.  Here's my stylesheet if it helps... Thank you!

 

.jqueryslidemenu{
font: bold 12px Verdana;
width: 100%;
background-color: #363636;
background-repeat: repeat-x;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
color: #2d2b2b;
text-decoration: none;
background-color: #363636;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #999999;
}

.jqueryslidemenu ul li a:hover{
color: #FFFFFF;
background-color: #363636;
background: url(../images/nav_hover.jpg);
background-repeat: repeat-x;
background-position: bottom;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
color: #333333;
background-color: #eff9ff;
background: url(../images/nav_hover.jpg);
background-repeat: repeat-x;
background-position: bottom;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

[Axeia]

I've also set the vmode to transparent in the flash code as well

 

That ought to do the trick. Got a live link (or demo page) for some playing around in firebug?

[kyleldi]

http://laser-dynamics.com/new-index.php

 

I've tried it on > 4 browsers.. same problems

[Axeia]

Mmh to my own surprise I couldn't seem to get it working either.

Never had the problem with the pure css way of making menu's though, so that might be worth considering.

[kyleldi]

Even a Pure CSS drop down does the same thing.. Any ideas?

[jsschmitt]

Given the design of the page, you may want to try

 

<param name="wmode" value="opaque">

 

Also, the issue (i believe) is that you have javascript calling your 'movie', and the wmode is not applied to that, only the one that plays if java is disabled...

[kyleldi]

changing wmode to opaque gives me similar results... i'm not sure that wmode is going to do anything...?

[jsschmitt]

Did you update the javascript code calling the movie?

[spikypunker]

hi im having the same problem, any luck?

 

http://www.maddogmagazine.co.uk/indexNEW.php

[kyleldi]

Not yet...  It seems as though DW implements a javascript that over-rides the wmode setting.