●スクリプト
<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にてブロックボックスに変更している。
サンプルソース
コメント
コメントを書く