掲示板/JavaScript質問板/過去ログ/一覧/ クリックすると下にサブメニューが表示される方法を教えて下さい

0 名前： ことり ： 2006/11/21（火） 14:49 ID:C.c53PIa: はじめまして。
左側にイメージで作成したリンクが縦に6つ並んでいて、そのうちの2つはクリックをすると下にサブメニューが表示されるようにしたいのですが、全くできません。（涙）いくつか技を紹介しているページがあったのですが、ただソースをコピーしただけではサブメニューがでてきませんでした。（ひとつできてもふたつになると動かなかったり、サブメニューの位置が紹介されている位置にしか表示されなかったり・・・）

イメージ的にはhttp://www.fujitecom.co.jp/topen.html こんな感じです。これは高度かしら？
下にメニューが表示されればどんなにシンプルなものでもよいのです。
どうかよろしくお願いいたします。。（涙）

もし、、コピーするだけでなかったら少し説明もお願いいたします。今までコピーだけでうまくいったことがないもものですから・・・すみません、全くの初心者です。

1 名前： ストーブ ： 2006/11/21（火） 14:49 ID:5tRQSiO.

トップ項目には画像を利用していますが、こんなんどうでしょう？

┏━━━ HTML
　<div id="navi_box">
　　<ul>
　　　<li class="parent" onmouseover="this.className='parentOn'" onmouseout="this.className='parent'">
　　　　<a href="#">あああ</a>
　　　　　<ul>
　　　　　　<li><a href="#">Sample1-1</a></li>
　　　　　　<li><a href="#">Sample1-2</a></li>
　　　　　　<li><a href="#">Sample1-3</a></li>
　　　　　　<li><a href="#">Sample1-4</a></li>
　　　　　</ul>
　　　</li>
			
　　　<li class="parent" onmouseover="this.className='parentOn'" onmouseout="this.className='parent'">
　　　　<a href="#">いいい</a>
　　　　　<ul>
　　　　　　<li><a href="#">Sample2-1</a></li>
　　　　　　<li><a href="#">Sample2-2</a></li>
　　　　　　<li><a href="#">Sample2-3</a></li>
　　　　　　<li><a href="#">Sample2-4</a></li>
　　　　　</ul>
　　　</li>
			
　　　<li class="parent" onmouseover="this.className='parentOn'" onmouseout="this.className='parent'">
　　　　<a href="#">ううう</a>
　　　　　<ul>
　　　　　　<li><a href="#">Sample3-1</a></li>
　　　　　　<li><a href="#">Sample3-2</a></li>
　　　　　　<li><a href="#">Sample3-3</a></li>
　　　　　　<li><a href="#">Sample3-4</a></li>
　　　　　</ul>
　　　</li>
			
　　　<li class="parent" onmouseover="this.className='parentOn'" onmouseout="this.className='parent'">
　　　　<a href="#">えええ</a>
　　　　　<ul>
　　　　　　<li><a href="#">Sample4-1</a></li>
　　　　　　<li><a href="#">Sample4-2</a></li>
　　　　　　<li><a href="#">Sample4-3</a></li>
　　　　　　<li><a href="#">Sample4-4</a></li>
　　　　　</ul>
　　　</li>
			
　　　<li class="parent" onmouseover="this.className='parentOn'" onmouseout="this.className='parent'">
　　　　<a href="#">おおお</a>
　　　　　<ul>
　　　　　　<li><a href="#">Sample5-1</a></li>
　　　　　　<li><a href="#">Sample5-2</a></li>
　　　　　　<li><a href="#">Sample5-3</a></li>
　　　　　　<li><a href="#">Sample5-4</a></li>
　　　　　</ul>
　　　</li>
			
　　　<li class="parent" onmouseover="this.className='parentOn'" onmouseout="this.className='parent'">
　　　　<a href="#">かかか</a>
　　　　　<ul>
　　　　　　<li><a href="#">Sample6-1</a></li>
　　　　　　<li><a href="#">Sample6-2</a></li>
　　　　　　<li><a href="#">Sample6-3</a></li>
　　　　　　<li><a href="#">Sample6-4</a></li>
　　　　　</ul>
　　　</li>
			
　　　<li class="parent" onmouseover="this.className='parentOn'" onmouseout="this.className='parent'">
　　　　<a href="#">ききき</a>
　　　　　<ul>
　　　　　　<li><a href="#">Sample7-1</a></li>
　　　　　　<li><a href="#">Sample7-2</a></li>
　　　　　　<li><a href="#">Sample7-3</a></li>
　　　　　　<li><a href="#">Sample7-4</a></li>
　　　　　</ul>
　　　</li>
　　</ul>
　</div>

┏━━━ CSS
　/*----------------------リストメニューBOXの設定*/
#navi_box{
　width:800px;　　　　　　/*NAVI-BOXの幅*/
　margin-bottom:20px;
}

　/*----------------------親メニューの設定*/
#navi_box ul{
　position:absolute;
　z-index:100;
　list-style:none;　　　　　　/*リストマーカーの非表示*/
　margin:0px;　　　　　　/*マージンとパディングの値を０にする*/
　padding:0px;
}

#navi_box li{
　float:left;　　　　　　/*ボックスを横に並べる*/
　width:114px;　　　　　　/*各ボックスの幅 7×114px=798px*/
　margin:0px;　　　　　　/*マージンとパディングの値を０にする*/
　padding:0px;
}

#navi_box a{
　display:block;　　　　　　/*ブロック要素にする*/
　width:100%;　　　　　　/*WinIE6対策の為に必ずボックス幅を指定する*/
　color:#f96810;
　font-weight:normal;
　text-align:center;　　　　　　/*テキストの水平方向センタリング*/
　line-height:32px;　　　　　　/*テキストの垂直方向センタリングを指定(画像の高さ)*/
　text-decoration:none;
　background-image:url(./画像.gif);
　background-position:right top;
}

#navi_box a:hover{　　　　　　/*onMOUSE時の背景画像を指定*/
　color:#fbc9ae;
　font-weight:normal;
　background-position:left top;
}

#navi_box a:active{　　　　　　/*onClick時の背景色を指定*/
　color:#ffffff;
　background-image:none;　　　　　　/*背景画像を消去する*/
　background-color:#fb9c63;　　　　　　/*背景色*/
}

　/*----------------------子メニューの設定*/
#navi_box ul ul{
　list-style:none;　　　　　　/*リストマーカーの非表示*/
}

#navi_box ul ul li{
　float;none;　　　　　　/*親ボックスのfloatが適用されないように設定*/
}

#navi_box ul ul li a{
　border-top:2px solid #ffffff;　　　　　　/*子メニューボックスの上枠線を設定*/
　background:none;　　　　　　/*親ボックスの背景画像が適用されないように削除*/
　font-size:90%;
　font-weight:normal;
　line-height:31px;　　　　　　/*テキストの垂直方向センタリングを指定*/
　background-color:#f1f1f1;　　　　　　/*背景色*/
}

#navi_box ul ul li a:hover{　　　　　　/*onMouse時の背景色を指定*/
　color:#bfbfbf;
　background-image:none;
　background-color:#ffffff;
}

#navi_box ul ul li a:active{　　　　　　/*onClick時の背景色を指定*/
　color:#ffffff;
　background-image:none;　　　　　　/*背景画像を消去する*/
　background-color:#fb9c63;　　　　　　/*背景色*/
}

/*-------プルダウンメニュー◆Javascriptの設定*/
　/*親メニューli要素が.parentの場合は非表示にする*/
#navi_box ul li.parent ul{
　display:none;
}

　/*親メニューli要素が.parentOnの場合は表示する*/
#navi_box ul li.parentOn ul{
　display:block;
}

pre{
　margin-top:70px;　　　　　　/*上マージンの上書き・レイアウトスペース対策*/
}

考えていたのと、違っていたら、ごめんなさい、よくある　リストタイプのメニューです。
画像は利用しなくても、背景色でOK!!です、適当にコードを書き直して利用して下さい。。

2 名前： m035 ◆Wpzr1YKOiq ： 2006/11/21（火） 14:49 ［URL］ ID:aiDxbEqs

>>1
のソースですが、まず、実際に使用するときは全角スペースをなくした状態でないとうまく動作しないブラウザがあるのでご注意を。
あとは
http://m035.blog61.fc2.com/blog-entry-3.html

のような点で注意をしておきます。
このソースではJavaScriptが無効の場合、メニューは項目名しか表示されません。
標準状態で表示しておき、JavaScriptによってロード後直ちに非表示にするほうが安全です。
もしくは、

#navi_box ul li.parent ul{
　display:none;
}

の部分はJavaScriptによって別途、style要素ごとdocument.writeされるようにすれば回避できるかと思います。

3 名前： ことり ： 2006/11/21（火） 14:49 ID:C.c53PIa: UAさん、
おかげさまでなんとかなりそうです。
いろいろご説明ありがとうございました。