ポップアップメニューの制御について

質問

こんにちは。

現在、ポップアップメニューの制御がうまくいかず困っております。

[やりたいこと]
・リンクの上にマウスを置くとポップアップメニューが開く
・ポップアップメニューからマウスが外れるとポップアップメニューを閉じる
・対応したいブラウザは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";
}

回答No.2

leap_day · ベストアンサー

こんにちは

ポップアップメニューからonMouseoutしたときに非表示にしたいのであればポップアップメニューの方・・・つまり<div>の方にonMouseoutをつけてやればいいと思います

回答No.1

noname#39970

これを参考に
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/ArekorePopup.html

お礼

ありがとうございます。

下記を参考に試して、ほぼ完成はしたのですが、
リンクの数が多い場合の非表示化(配列をループさせる)の
処理が気になっているところです。
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1282110

サブメニューを共通化するように検討してみます。
教えて頂いたサイトも参考にさせて頂きます。