ポップアップメニューの制御について
こんにちは。
現在、ポップアップメニューの制御がうまくいかず困っております。
[やりたいこと]
・リンクの上にマウスを置くとポップアップメニューが開く
・ポップアップメニューからマウスが外れるとポップアップメニューを閉じる
・対応したいブラウザはIE6,IE7,FireFox2.0
他のサイトを参考にした結果、onmouseoverのイベントでメニュー表示まではできたのですが、メニューからマウスを外した時にメニューを閉じる処理がうまくいっておりません。onmouseoutを使うとできそうなのですが、メニューからではなく、リンクからマウスを外した時にメニューが消えてしまい困っています。
解決のヒントになることでも結構ですので、アドバイスを頂けたらと思います。現在はclearTimeSetやclearTimeoutで制御できないかを調べている最中です。
よろしくお願いいたします。
[HTMLのソース(一部抜粋)]
<div id="testmenu1" style="position: absolute;visibility: hidden;(省略)">
<ul style="(省略)">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
<div id="testmenu2" style="position: absolute;visibility: hidden;(省略)">
<ul style="(省略)">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
<table>
<tr><td>
<a href="" onclick="return false;" onmouseover="testShowPopupMenu('testmenu1'); return false;" onmouseout="testHidePopupMenu('testmenu1'); return false;">メニュー1</a>
</td></tr>
<tr><td>
<a href="" onclick="return false;" onmouseover="testShowPopupMenu('testmenu2'); return false;" onmouseout="testHidePopupMenu('testmenu2'); return false;">メニュー2</a>
</td></tr>
</table>
[JavaScriptのソース(一部抜粋)]
var mX = 0;
var mY = 0;
var pX = 5; // マウスから右に5ピクセルずらす
var pY = 5; // マウスから下に5ピクセルずらす
document.onmousemove = testGetMousePoint;
// マウス位置取得
function testGetMousePoint() {
mX = event.clientX + document.body.scrollLeft;
mY = event.clientY + document.body.scrollTop;
}
// ポップアップメニューの表示
function testShowPopupMenu(id) {
pop = document.getElementById(id).style;
pop.visibility = "visible";
pop.left = mX + pX + "px";
pop.top = mY + pY + "px";
}
// ポップアップの非表示
function testHidePopupMenu(id) {
document.getElementById(id).style.visibility = "hidden";
}
