Databases
StackOverflow2013
Postsdbo
POcss drop down menu falls behind google chart
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcss drop down menu falls behind google chart
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload