0

我的代码中有简单的 css/jquery 菜单和google.visualization.PieChart。但是最近我看到我的饼图覆盖了菜单。即当我下拉菜单时，除了饼图后面的部分之外，所有菜单都是可见的（在下面的示例中，我在菜单中看不到技术手册）。

在此处输入图像描述

如果有人可以建议我应该在 html/css/js 代码中更改什么，我将不胜感激。

也许这不是必需的，但为了完整起见，我在下面展示了我的问题的代码示例。您需要从dynamicdrive下载jquerycssmenu.css和jquerycssmenu.js以使其运行。

<!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>
4

1 回答 1

1

您需要将菜单的 z-index css 属性设置为高于饼图。尝试 9999 开始。

于 2012-04-05T21:07:37.683 回答