Question

我已经尝试了我能想到的一切。我试过玩定位和z索引，但不管我做什么，下拉菜单仍然落后于谷歌图表。它适用于火狐，但不适用谷歌浏览器或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); ?>

Answer 1

您是否已将自己的Flash文件嵌入到html中？在这种情况下，请尝试将<param name="wmode" value="transparent">添加到object-tag。

Answer 2

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

Answer 3

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

图表的div总是有一个css样式position: relative。喜欢

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

所以，我只是将我的元素添加到这个div并给它一个at position:absolute，z-index为10或smth，所以它有效

Answer 4

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

css下拉菜单落后于谷歌图表

4 个答案: