I've exhausted all my options. I've experimented with positioning and z-indexes, but no matter what I try, the drop-down menu remains hidden behind the google chart. It functions properly on Firefox, but not on Chrome or IE. Any helpful advice would be greatly appreciated!
Below is the CSS for the drop-down:
#deluxeMenu
{
overflow:visible;
z-index:9999999;
}
ul#deluxeMenu
{
display:block;font-size:0;zoom:1;float: left;
overflow:visible;
position: relative;
z-index:99999;
}
ul#deluxeMenu ul{display:none; z-index:100;}
ul#deluxeMenu li:hover>*{display:block}
ul#deluxeMenu >li:hover{position:relative; z-index:100;}
ul#deluxeMenu ul{
position: absolute;left:-1px;top:98%;z-index:100;}
ul#deluxeMenu ul ul{
position: absolute;left:98%;top:-2px;z-index:100;}
ul#deluxeMenu,ul#deluxeMenu ul{
margin:0px;list-style:none;padding:0px;background-color:#353535;border-width:0px;border-style:none;border-color:#C0AF62; z-index:100;}
ul#deluxeMenu ul{
/*width:145px;padding:0;*/
overflow:visible;
}
ul#deluxeMenu li{
display:block;margin:0;font-size:0;float:left; overflow:visible;
}
ul#deluxeMenu a:active, ul#deluxeMenu a:focus {outline-style:none; z-index:100;}
ul#deluxeMenu a,ul#deluxeMenu li.dis a:hover{
display:block;vertical-align:middle;background-color:#353535;background-image:url(blank.gif);border-width:1px 0px 1px 0px;border-style:solid;border-color:#3F3F3F #333333 #292929 #333333;text-align:center;text-decoration:none;padding:10px 12px 10px 10px;font:normal 13px calibri,arial,tahoma;color: #FFFFFF;text-decoration:none;cursor:pointer;
}
ul#deluxeMenu ul li {float:none; overflow:visible;}
ul#deluxeMenu ul a,ul#deluxeMenu ul li.dis a:hover{
text-align:left;white-space:nowrap;
}
ul#deluxeMenu li:hover>a
{
background-image:url(back-over.gif);border-col…
<p>Here is the php file for the web page:</p>
<pre><code><body>
<div style="position:relative;">
<!-- Deluxe Menu -->
<div id = "box">
<ul id="deluxeMenu">
<?php include('populateMenu.php')?>
</ul>
</div>
<div id="chart_div">
</div>
<?php closeDatabase($db); ?>