マウスカーソルを乗せたときにサブメニューが表示されるようにする（１列）

●スクリプト

<script type="text/javascript"><!--

function hiraku(tgt){ // 開く

if (document.getElementById){

tar=document.getElementById(tgt);

tar.style.display="";

}

}

function toziru(tgt){ // 閉じる

if (document.getElementById){

tar=document.getElementById(tgt);

tar.style.display="none";

}

}

//--></script>

●HTML

<div onMouseover="hiraku('i_kantou')" onMouseout="toziru('i_kantou')" class="c_kantou">

関東

<div id="i_kantou" style="display: none;">

<a class="c_tokyo" href="#">東京</a>

<a class="c_kanagawa" href="#">神奈川</a>

<a class="c_saitama" href="#">埼玉</a>

</div><!-- end of i_kantou -->

</div><!-- end of c_kantou -->

●CSS

.c_kantou{

background-color:lightskyblue;

border: 0px solid #FF0000;

width:200px;

float:left;

}

.c_tokyo{

display: block; /* インラインボックスをブロックボックスに変更する */

text-decoration: none; /* リンクの下線を消す */

border:0px solid #FFFFFF;

background-color:lightgreen;

}

.c_kanagawa{

display: block; /* インラインボックスをブロックボックスに変更する */

text-decoration: none; /* リンクの下線を消す */

border:0px solid #FFFFFF;

background-color:springgreen;

}

.c_saitama{

display: block; /* インラインボックスをブロックボックスに変更する */

text-decoration: none; /* リンクの下線を消す */

border:0px solid #FFFFFF;

background-color:greenyellow;

}

●解説

まず、マウスカーソルの「乗せる」「乗せない」で、「閉じる」「開く」の処理を実装しておく（style.display）。

次に、 class="c_kantou"　のdivに対して、マウスカーソルの「乗せる」「乗せない」のイベント設定し、

各スクリプトを呼ぶようにしておく。

そして、class="c_kantou"　のdiv内部に、さらにdivを配置する。配置されたdivはサブメニューとなる。

マウスカーソルのイベントに応じた動作は、親メニューのdiv（つまりc_kantou）にて実現されるので、

サブメニューはそれに準じて一括で表示されたり非表示になったりする。

ここで、c_kantou と i_kantou の違いについて説明しておく。

いずれも関東を指し示す識別子である。cはクラス、iはIDである。

c_kantou の役割は、関東のメニューの装飾である。

背景色や横幅を設定するためのクラスである。

一方、i_kantou は、関東メニュー全般（サブメニューも含む）の表示・非表示を制御するに当たり、

スクリプトに渡す引数としてIDが必要であるが、そのIDを指定するものである。

スクリプトはIDとしてi_kantouを受け取るので、それをキーとして、IDにi_kantouが設定された領域を

表示させたり、非表示にさせたりする。

c_tokyo、c_kanagawa、c_saitamaは、それぞれ東京、神奈川、埼玉の領域（サブメニューの各ボタン）の装飾のためのクラスである。

リンク（aタグ）であるが、CSSにてブロックボックスに変更している。

サンプルソース

http://tokyo-webs.jp/sample_source/130327a/

東京ウェブ制作