CSS下拉菜单落后于谷歌图表答案

【问题标题】：css drop down menu falls behind google chartCSS下拉菜单落后于谷歌图表
【发布时间】：2015-12-16 23:07:18
【问题描述】：

我已经尝试了我能想到的一切。我尝试过使用定位和 z-indexes，但无论我做什么，下拉菜单仍然落后于谷歌图表。它适用于火狐，但不适用于谷歌浏览器或 IE。任何建议将不胜感激！

这里是下拉css：

#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-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 > a img.def  {display:none;}
    ul#deluxeMenu li:hover > a img.over {display:inline;}
    ul#deluxeMenu ul span{background-image:none;padding-right:20px;}

这是网页的php文件：

<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); ?>

【问题讨论】：

标签： html css positioning z-index google-visualization

【解决方案1】：

您是否在 html 中自行嵌入了 flash 文件？在这种情况下，请尝试将<param name="wmode" value="transparent"> 添加到对象标签中。

【讨论】：

【解决方案2】：

我看到您将z-index 应用于导航 div，但您是否也将其应用于chart_div?尝试将z-index:1 添加到#chart_div 并查看如果有帮助的话。

【讨论】：

我做了一些研究，显然这是谷歌浏览器的错。显然 Google Chrome 有时会出现一些 z-index 问题！

【解决方案3】：

我遇到了类似的问题，不是菜单，而是与其他元素重叠，所以我认为这可能会有所帮助

图表的 div 始终具有 css 样式 position: relative。喜欢

<div id="chart_div" style="width: 100%; height: 500px; position: relative;">

所以，我只是将我的元素附加到这个 div 并给它一个 attr position:absolute 和 z-index 10 或 smth，所以它起作用了

【讨论】：

【解决方案4】：

我遇到了同样的问题。从z-index 中删除一个 9。你应该得到z-index:999999;

【讨论】：