There is a dropdown that appears under the "Our Work" tab, and it is visible on all pages except the home page, and I know this has to do with the javascript slideshow on the home page.
I have been able to overcome this on other sites, but was using different tools to construct the slideshow. In this case, the client requires the slideshow to pull images from a folder, and they want to be able to modify the show by simply adding/removing images from the folder. I satisfied that requirement, but now have no success with the drop down.
I played with the z-index of both the slideshow and the menu, even going so far as to force the slides BEHIND the page's background. Still, the dropdown does not appear on the home page. It's as if no matter what I do, that dropdown is still going to hide behind the slides.
Here is the relevant CSS code:
#navcontainer {
padding: 0px;
width: 780px;
height: 55px;
z-index:100;
position:relative;
}
#slideshow {
position:relative;
z-index:99;
}
/*This rule styles the sub-menu links*/
#p7PMnav ul a, #p7PMnav ul a:visited {
padding: 4px 10px 4px 16px;
background-color: #e6ad4b;
color: #fff;
}
/*the sub-menu hovers*/
#p7PMnav ul a:hover, #p7PMnav ul a:active, #p7PMnav ul a:focus {
background-color: #d28b11;
color: #FFFFFF;
letter-spacing: 0.01px;
}
/*the submenu classes */
/*The top property here and in the show class serves to fix a minor bug introduced
by the good folks at Apple in their Safari browser for Panther OS*/
#p7PMnav .p7PMhide {
left: -9000px;
border: 0;
top: 0;
}
#p7PMnav .p7PMshow {
top: auto;
left: auto;
z-index: 20000 !important;
}
And here is the getimages.php script referenced in the home page slideshow script:
<?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");
//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'galleryarray['.$curimage.']="'.$file .'";';
$curimage++;
}
}
closedir($handle);
}
return($files);
}
echo 'var galleryarray=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>
All other relevant code from the home page is below.
MENU BAR
<div id="navcontainer" bgcolor="#CC0000"><table width="780" border="0" cellspacing="0" cellpadding="0">
<tr><td><img src="../media/navflrlft.jpg" /></td>
<td><ul id="p7PMnav">
<li><a href="../about.html" id="b1">About Us</a></li>
<li><a href="#" class="p7PMtrg" id="b2">Our Work</a>
<ul>
<li><a href="../projectmanagement.html">Project Management</a></li>
<li><a href="../consulting.html">Consulting</a></li>
<li><a href="../transportation.html">Facility Maintenance</a></li>
<li><a href="../emergency.html">Emergency Planning</a></li>
</ul>
</li>
<li><a href="../references.html" id="b3">References</a></li>
<li><a href="../contact.html" id="b4">Contact</a></li>
<li><a href="../newhome2.html" id="b5">Home</a></li>
<!--[if lte IE 6]><style>#p7PMnav a{height:1em;}#p7PMnav li{height:1em;}#p7PMnav ul li{float:left;clear:both;width:100%}</style><![endif]-->
<!--[if IE 6]><style>#p7PMnav ul li{clear:none;}</style><![endif]-->
<!--[if IE 7]><style>#p7PMnav a{zoom:100%;}#p7PMnav ul li{float:left;clear:both;width:100%;}</style><![endif]-->
</ul></td>
<td><img src="../media/navflrrt.jpg" /></td>
</tr>
</table>
</div>
SLIDESHOW
<div id="slides">
<script src="http://www.[examplesite].com/media/slides/getimages.php"></script>
<script type="text/javascript">
var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "http://www.[examplesite].com/media/slides/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}
window.onload=function(){
setInterval("rotateimages()", 4000)
}
</script>
<div>
<img id="slideshow" src="media/slides/arlington.jpg" />
</div>
</div>
