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

●スクリプト

<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 -->

<div onMouseover="hiraku('i_kansai')" onMouseout="toziru('i_kansai')" class="c_kansai">

関西

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

<a class="c_osaka" href="#">大阪</a>

<a class="c_kyoto" href="#">京都</a>

<a class="c_wakayama" href="#">和歌山</a>

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

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

<div class="clear"></div>

<p>あかさたな。</p>

●CSS

div.clear{

clear:both;

}

.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;

}

.c_kansai{

background-color:sandybrown;

border: 0px solid #FF0000;

width:200px;

float:left;

}

.c_osaka{

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

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

border:0px solid #FFFFFF;

background-color:tomato;

}

.c_kyoto{

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

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

border:0px solid #FFFFFF;

background-color:plum;

}

.c_wakayama{

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

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

border:0px solid #FFFFFF;

background-color:hotpink;

}

●解説

基本的な構造は１列版と同じ。新たに関西を加えることで、横２列にしている。

その際、CSSで　float:left;　を指定することで、関東と関西を横並びにしている。

なお「あかさたな。」を関東の下に持ってくるために、

<div class="clear"></div>

を入れている。

サンプルソース

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

東京ウェブ制作