谷歌餅圖覆蓋jQuery菜單

我在我的代碼simple css/jquery menu和google.visualization.PieChart。不過最近我看到我的餅圖覆蓋了菜單。即當我下拉菜單時，除了餅圖後面的部分（在下面的示例中，我看不到技術手冊在菜單中），它全部可見。谷歌餅圖覆蓋jQuery菜單

enter image description here

如果有人能我勸我應該在HTML/CSS/JS代碼改變我將非常感激。

也許這不是必要的，但爲了完整性，我在下面展示了我的問題的代碼示例。您需要下載jquerycssmenu.css和jquerycssmenu.js從dynamicdrive才能運行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-2"> 
<meta name="robots" content="index,follow"> 

<title>Test Site</title> 
<link rel="stylesheet" type="text/css" charset="utf-8" media="all" href="./common.css"> 
<link rel="shortcut icon" href="./favicon.gif" type="image/gif" /> 

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Task'); 
     data.addColumn('number', 'Hours per Day'); 
     data.addRows([ 
      ['Work', 11],['Eat', 2],['Commute', 2],['Watch TV', 2],['Sleep', 7] 
     ]); 
     var options = { 
      title: 'My Daily Activities' 
     }; 

     var chart = new google.visualization.PieChart(document.getElementById('chartClient_Group_all_div')); 
     chart.draw(data, options); 
     } 
    </script> 


<link rel="stylesheet" type="text/css" href="jquerycssmenu.css" /> 
<script type='text/javascript' src='js/jquery-1.2.6.min.js'></script> 
<script type="text/javascript" src="jquerycssmenu.js"></script> 

</head> 

<body lang="en" dir="ltr"> 

<!-- ================= HEADER ================= --> 

<div id="myjquerymenu" class="jquerycssmenu"> 
<ul> 
    <li><a href="./resources.php">Resources</a> 
    <ul> 
     <li><a href="./resourcesQ.php">Infos on Queue</a> 
     <li><a href="./resourcesH.php">Infos on Hardware</a> 
     <li><a href="./resourcesS.php">Software manuals</a> 
     <li><a href="./resourcesT.php">Technical manuals</a> 
    </ul> 
    </li> 
</ul> 
</div> 

<div id="naviline"><hr style="display:none;"></div> 

<div id="page"> 
    <TABLE border="1" BORDERCOLOR=white class="t0"><tr> 
    <td align="left" valign="top" width="500px" style="border-style: none; background: white;"> 
     <center><h4> Some Title</h4><br> 
     <div id="chartClient_Group_all_div"> </div> 
    </td> 
    </tr></table> 
<br> 
</div> <! -- page -- > 
</body> 
</html>

來源

2012-04-05 Kris_R

您需要將菜單的z-index css屬性設置爲高於餅圖。嘗試9999開始。

來源

2012-04-05 21:07:37 Fresheyeball

謝謝 - 我沒有新的這一個。 – 2012-04-05 21:48:26

谷歌餅圖覆蓋jQuery菜單

回答

相關問題