title: css drop down menu falls behind google chart
body: <p>I've tried everything I could think of.
  I've tried playing around with the positioning and the z-indexes but no matter what I do the drop down menu still goes behind the google chart. It works with fire fox but not google chrome or IE. Any advice would be much appreciated!</p>
  
  <p>Here is the drop down css:</p>
  
  <pre><code>#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&gt;*{display:block}
  
  
  ul#deluxeMenu &gt;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&gt;a
      {
  background-image:url(back-over.gif);border-color:#3F3F3F #333333 #292929 #333333;border-style:solid;font:normal 13px calibri,arial,tahoma;color: #FFFFFF;text-decoration:none;
  
  
  }
      ul#deluxeMenu li.dis a{color: #AAAAAA !important;}
  
      ul#deluxeMenu img{
  border: none;vertical-align: middle;margin-right:20px;}
      ul#deluxeMenu img.over{display:none}
      ul#deluxeMenu li.dis a:hover img.over{display:none !important}
      ul#deluxeMenu li.dis a:hover img.def {display:inline !important}
      ul#deluxeMenu li:hover &gt; a img.def  {display:none;}
      ul#deluxeMenu li:hover &gt; a img.over {display:inline;}
      ul#deluxeMenu ul span{background-image:none;padding-right:20px;}
  </code></pre>
  
  <p>Here is the php file for the web page:</p>
  
  <pre><code>&lt;body&gt; 
  
  
  &lt;div style="position:relative;"&gt;
  &lt;!-- Deluxe Menu --&gt;                    
  &lt;div id = "box"&gt;
  &lt;ul id="deluxeMenu"&gt;
  &lt;?php include('populateMenu.php')?&gt;
  &lt;/ul&gt;
  &lt;/div&gt;                              
  &lt;div id="chart_div"&gt;
  &lt;/div&gt;
  
  
                              &lt;?php  closeDatabase($db); ?&gt;
  </code></pre>
  
  <p>          </p>
  
  <p></p>