編集: 回答が得られなかったので、この質問に詳細を追加します。
http://codecanyon.net/item/drop-menu/81289 (有料) で提供されているドロップダウン メニューを使用します。
次のコードは、メニューを作成するための HTML と Java スクリプトです。
<div id="divMenu" style="position: relative">
<ul id="nav-one" class="dropmenu">
<li>
<a id="a1" href="#divManageXXXX">Manage XXXXXYYYYY</a>
<ul>
<li><a id="aManageX" href="#divManageX">Manage X</a></li>
<li><a id="aManageY" href="#divManageY">Manage Y</a></li>
</ul>
</li>
<li>
<a id="aManageZZZZZ" href="#divManageZZZZ">Manage ZZZZZZZZZZZZ</a>
<ul>
<li><a id="aManageZ1" href="#ManageZ1">Manage Z1</a></li>
<li><a id="aManageZ2" href="#ManageZ2">Manage Z2</a></li>
<li><a id="aManageZ3" href="#ManageZ3">Manage Z3</a></li>
<li><a id="aManageZ4" href="#ManageZ4">Manage Z4</a></li>
</ul>
</li>
<li>
<a id="aManageS" href="#">Manage S</a>
<ul>
<li><a id="aManageS1" href="#ManageS1">Manage S1</a></li>
<li><a id="aManageS2" href="#ManageS2">Manage S2</a></li>
<li><a id="aManageS3" href="#Manage S3">Manage S3</a></li>
</ul>
</li>
<li>
<a id="" href="#">Manage B</a>
<ul>
<li><a id="aManageB1" href="#ManageB1">Manage B1</a></li>
</ul>
</li>
</ul>
</div>
これを初期化するコードは次のとおりです。
jQuery('#nav-one').dropmenu({ openClick: true });
これとは別に、jqGrid を次のように定義しました。
HTML コード:
<div id="divMain">
<div id="divManageX">
<table>
<tr></tr>
<tr></tr>
<tr>
<table id="tblManageX"></table>
<div id="divManageY"></div>
</tr>
</table>
</div>
<div id="ManageY">
.....
</div>
</div>
jqGrid を初期化するコードは非常に単純で、この Web サイトや他の Web サイトに存在します。
問題: クリックするとドロップダウン メニューが展開されるときに、背景に jqGrid がある場合、下の画像に示すように、ドロップダウン メニュー項目が jqGrid の背後に隠れます。