css выпадающее меню отстает от Google Chart - PullRequest
Новая
       6

css выпадающее меню отстает от Google Chart

2 голосов
/ 11 марта 2012

Я перепробовал все, что мог придумать.Я пытался поиграться с позиционированием и z-индексами, но независимо от того, что я делаю, выпадающее меню все равно идет за диаграммой Google.Он работает с Fire Fox, но не Google Chrome или 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); ?>

Ответы [ 4 ]

2 голосов
/ 11 марта 2012

Я вижу, что вы применили z-index к элементу навигации, но вы тоже применить это к chart_div? Попробуйте добавить z-index:1 к #chart_div и посмотрите если это поможет.

2 голосов
/ 11 марта 2012

Вы сами встраивали флэш-файл в свой HTML?В этом случае попробуйте добавить <param name="wmode" value="transparent"> к тегу объекта.

0 голосов
/ 16 декабря 2015

У меня была такая же проблема. Удалить одну 9 из z-index. Вы должны получить z-index:999999;

0 голосов
/ 07 ноября 2014

У меня была похожая проблема, не с меню, а просто с перекрытием других элементов, так что это может быть полезно, я думаю

div диаграммы всегда имеет стиль css position: relative.как 

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

, поэтому я просто добавил свой элемент к этому div и присвоил ему значение attr position:absolute с z-index 10 или что-то еще, так что это сработало

...