オンマウスで表示されるテキスト

質問

下記のようなJavascriptを探しております。
お分かりの方がいらっしゃいましたらお教え下さい。

最初にページを開いた時は下記の状態で表示されます。
他の親メニューにマウスを合わせるとそれぞれのサブメニュー
が表示されるのですが、親メニューからマウスを外してもサブ
メニューが消えないようにできればと思います。
親メニューとサブメニューはプルダウンメニューのように隣接
して伸び縮みするのではなく、それぞれ独立した場所に表示さ
せたいと考えております。

最初にページを開いたときの状態
●親メニュー1　　　　　親メニュー1のサブメニュー1
●親メニュー2　　　　　親メニュー1のサブメニュー2
●親メニュー3　　　　　親メニュー1のサブメニュー3
●親メニュー4　　　　　親メニュー1のサブメニュー4

親メニュー2にマウスを合わせたときの状態
●親メニュー1　　　　　親メニュー2のサブメニュー1
●親メニュー2　　　　　親メニュー2のサブメニュー2
●親メニュー3　　　　　親メニュー2のサブメニュー3
●親メニュー4　　　　　親メニュー2のサブメニュー4

分かりづらい説明で申し訳ありません。
補足説明いたしますので、よろしくお願い致します。

回答No.1

yambejp · ベストアンサー

離れたところというのが微妙ですが、こんな感じで？

<style>
.hide{
display:none;
}
</style>
<script>
function show(id){
var obj=document.getElementById(id);
var n=obj.parentNode.firstChild;
while(n){
if(n.nodeName=="UL") n.className="hide";
n=n.nextSibling;
}
obj.className="";
}
</script>
<ul>
<li><a href="#" onMouseover="show('sub1')">親メニュー1</a></li>
<li><a href="#" onMouseover="show('sub2')">親メニュー2</a></li>
<li><a href="#" onMouseover="show('sub3')">親メニュー3</a></li>
<li><a href="#" onMouseover="show('sub4')">親メニュー4</a></li>
</ul>
<hr>
<div>
<ul class="hide" id="sub1">
<li>親メニュー1のサブメニュー1
<li>親メニュー1のサブメニュー2
<li>親メニュー1のサブメニュー3
<li>親メニュー1のサブメニュー4
</ul>
<ul class="hide" id="sub2">
<li>親メニュー2のサブメニュー1
<li>親メニュー2のサブメニュー2
<li>親メニュー2のサブメニュー3
<li>親メニュー2のサブメニュー4
</ul>
<ul class="hide" id="sub3">
<li>親メニュー3のサブメニュー1
<li>親メニュー3のサブメニュー2
<li>親メニュー3のサブメニュー3
<li>親メニュー3のサブメニュー4
</ul>
<ul class="hide" id="sub4">
<li>親メニュー4のサブメニュー1
<li>親メニュー4のサブメニュー2
<li>親メニュー4のサブメニュー3
<li>親メニュー4のサブメニュー4
</ul>
</div>

お礼

まさにこれです！
ありがとうございます。
サイトを2カラムにして左に親メニューを置き、右側にリスト形式にして
サブメニューを表示させたかったのですが、説明が悪く申し訳ありません。

本当にありがとうございました。