Drop down menu behind slide show

[scacci]

I know that this is probably a z-index issue, but I can't for the life of me correct it. Any help would be appreciated.

Here is the site.

http://www.woodstockfilmfestival.com/mainslidetest.php

Here is some of the header code below. Please let me know what other info I can provide and thanks so much in advance.


#banner_home {
background-image: url(images/banner/2011headerbanner.jpg);
height: 154px;
width: 950px;
background-color: #000;
background-repeat: no-repeat;
z-index: 10000;
}
#imagefloat {
position: relative;
top: 14px;
left: 24px;
width: 215px;
height: 127px;
}
.fontwhite {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
color: #FFF;
}
.scroll {
height: 250px;
width: 675px;
z-index: 1;
}
.scroll img {
left: 0px;
top: 0px;
z-index: 1;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="http://woodstockfilmfestival.com/index.htm_files/css3menu1/style.css" type="text/css" />
<script src="http://www.woodstockfilmfestival.com/Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="http://www.woodstockfilmfestival.com/Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
.style27 {
font-size: 19px;
font-weight: bold;
}
.Header2Orange {
color: #930;
font-size: 20px;
z-index: 10000;
}
.red {
color: #600;
}
.black {
color: #000;
}
.redheader {
color: #900;
}
.contents {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 16px;
font-weight: bolder;
color: #003;
z-index: 10000;
}
.contentsubhead {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 14px;
font-weight: normal;
color: #900;
position:relative;
z-index: 10000;
}
.bodytext {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 14px;
color: #000;
font-weight: normal;
}
body, td, th {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.bodytext1 {
font-size: 14px;
}
.bodytext2 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 14px;
color: #000;
}
.floatleft {
float: left;
padding-right: 5px;
padding-bottom: 5px;
}
.bodytext3 {
font-family: Palatino;
font-size: 14px;
}
#Table_01 tr td div table tr td div table tr td a {
color: #000;
}
.fontNORMAL18 {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-style: normal;
color: #000000;
}
.fontNORMALitalic18 {
font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-style: italic;
font-weight: normal;
color: #000000;
}
#Table_01 tr td table tr .style27 .fontNORMAL18 {
font-weight: normal;
}
.fontNORMAL16italic {
font-style: italic;
}
<!--
[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif].fontBOLD16 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #000;
}
.fontNORMAL161 {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #000;
}
.fontWHITE {
color: #FFF;
}
.scroll {
height: 250px;
width: 675px;
z-index: 1;
}
.scroll img {
position: static;
left: 0px;
top: 0px;
z-index: 1;
}


-->
</style>
<script src=”https://ajax.googleapis.com/ajax/lib...jquery.min.js” type=”text/javascript”></script><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>

<script>$('.scroll').cycle({
fx: 'scrollRight'
}) </script>

[Beverleyh]

Try reducing the z-index for the banner - knock it down to -1 to put it to the back and then gradually increase it again until the banner shows on top of the other content but underneath the menu dropdowns;

#banner_home {
background-image: url(images/banner/2011headerbanner.jpg);
height: 154px;
width: 950px;
background-color: #000;
background-repeat: no-repeat;
z-index: 10000;
}

[scacci]

Try reducing the z-index for the banner - knock it down to -1 to put it to the back and then gradually increase it again until the banner shows on top of the other content but underneath the menu dropdowns;

#banner_home {
background-image: url(images/banner/2011headerbanner.jpg);
height: 154px;
width: 950px;
background-color: #000;
background-repeat: no-repeat;
z-index: 10000;
}

Thanks Beverly it's slideshow that needs to be underneath the drop downs and I've tried making that -1 and 0 and everything in between and nothing seems to work. I am worried that there is some issue with the coding in the drop down menus that I can't see for some reason. All of the banner stuff was created by someone else. I went in and added all the z-index values when the I first added the slider, as there weren't any in the coding, but it didn't seem to make a difference.

[Beverleyh]

I'm on iPhone so I can't do any testing at the mo. I see your menu CSS doesn't have any z-index so try adding that in with an ultra-high value (higher than anything else you've used). Also give it position (z-index only works with a position set too, which is probably why your other element's z-index values are doing unpredictable things);

ul#css3menu1,ul#css3menu1 ul{

/*  other CSS  */

z-index:99999;
position:absolute;  /*  or try relative  */
}

[scacci]

I'm on iPhone so I can't do any testing at the mo. I see your menu CSS doesn't have any z-index so try adding that in with an ultra-high value (higher than anything else you've used). Also give it position (z-index only works with a position set too, which is probably why your other element's z-index values are doing unpredictable things);

ul#css3menu1,ul#css3menu1 ul{

/*  other CSS  */

z-index:99999;
position:absolute;  /*  or try relative  */
}

That did it Beverly.

Thanks so much for all your help!!!