javascriptでポップアップメニュー

質問

はじめまして。題記の件でつまっています。
画面上のメニュー表示項目にマウスカーソルを合わせると、その位置にサブメニューを表示させたいです。
サブメニュー表示時に実現したいことは以下の3点です。

1.サブメニューのHTMLは画面上に記述しておき、カーソルがメニュー表示項目にある場合のみvisibleにする
2.サブメニューはカーソルが別のメニュー表示項目に移動した場合には、別のメニュー表示項目上でサブメニューを出すようにし、メニュー表示項目以外にカーソルが移動した場合には、メニューを非表示にする
3.サブメニューの表示位置はマウスカーソルの位置にする

＜イメージ＞

/* メニュー部分*/
<ul>
<li>メニュー表示項目1</li> ※1
<li>メニュー表示項目2</li>
…
</ul>

/*サブメニュー部分*/
<div id="menu" class="hidden">
<div>サブメニュー1</div>
<div>サブメニュー2</div>
</div>

※1にカーソルをあてると、下のhidden項目をカーソル位置に表示する

カーソル移動にあわせてメニューを追従させたり、メニュー領域以外の場合に非表示とすることができません。（つまりほとんどうまくいってないのですが・・・）

どうかご教示いただけないでしょうか。よろしくお願いします。
ちなみに以下のサイト様を参考にさせていただいてますが、こちらはカーソル位置に表示ではなく固定位置にサブメニュー表示でした。

http://miyakekobo.fc2web.com/temp/total_pd104.html

回答No.1

fujillin · ベストアンサー

多段メニューなら先人がいろいろ作成しているので、それを利用するか、参考にすればよいと思います。

（↓）ご質問に合致するものだけでなく、いろいろなタイプが紹介されてはいますが…
http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_navigationmenu
http://coliss.com/articles/build-websites/operation/javascript/1229.html
http://www.1stwebdesigner.com/css/300-jquery-css-mootools-and-js-navigation-menus/

よくわかりませんが、このあたりがイメージに近いのかも
http://onehackoranother.com/projects/jquery/droppy/

お礼

お礼が遅くなってしまってすみません…。
ご回答ありがとうございました。