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

我试过了我能想到的一切。我试着玩过定位和Z指数，但无论我做什么下拉菜单仍然落后于谷歌图表。它适用于火狐，但不适用于谷歌浏览器或IE。任何意见将不胜感激！css下拉菜单落后于谷歌图表

这里是下拉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); ?>

来源

2012-03-11 user1261710

你有自我嵌入式Flash文件在你的HTML？在这种情况下，请尝试将<param name="wmode" value="transparent">添加到对象标签。

来源

2012-03-11 01:13:31 Eydun

我看到你申请z-index到导航div，但你也适用于chart_div？尝试将z-index:1添加到#chart_div，如果有帮助，请参阅。

来源

2012-03-11 04:48:13 Cynthia

我做了一些研究，显然这是Google Chrome的错。显然谷歌浏览器有时会出现一些Z-索引问题！ – user1261710 2012-08-01 04:52:46

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

图表的DIV总是有一个css样式position: relative。像

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

所以，我刚刚追加我的元素，这个div和10或不便z-index给它一个ATTR position:absolute，所以它的工作

来源

2014-11-07 13:49:04 dav

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

来源

2015-12-16 15:07:18 Den

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

回答

相关问题