ついでに被リンクにしてみる
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel='stylesheet' href='style.css' type='text/css' media='screen,print'>
<style>
.list{ margin :20px 0 300px 20px;cursor:pointer; }
dl dd{ margin :0px 0; width:173px;height:auto; }
dt { color:
body{ background-image: URL("b_images/0.jpg");background-color :
.list dl{ margin :0 20px; padding :0;}
.list dt{
line-hight:100px;
background-image: url("http://xn--k7yw82bmua.com/b_images/kate.png");
background-repeat: repeat-x;
margin :0 0 1px 0;
border: 2px solid
border-top: 2px solid
border-left: 2px solid
width :173px;
text-align :center;
font-size :12px;
font-weight:bold;}
background-repeat: repeat-x;}
background-repeat: repeat-x;}
.list a{ display : block;text-decoration: none;padding:7px;}
.list a:link { color :
.list a:visited { color :
.list a:hover { background-color :
.mlist ul{ margin :0 2px;padding :0;list-style-type:none;}
.mlist li{
background-image: URL("http://xn--k7yw82bmua.com/b_images/mame.png");
background-position: 8px 9px;
background-repeat: no-repeat;
width :173px;
font-weight :bold;
text-align :left;
margin :0 -1px;
padding :0;
background-color :
border :solid 1px
.mlist a{
padding :11px 5px 5px 30px;
display : block;
color :
font-size :10px;
text-decoration: none;}
.mlist a:link { color :
.mlist a:visited { color :
.mlist a:hover {
background-image: URL("http://xn--k7yw82bmua.com/b_images/mame.png");
background-position: 6px 8px;
background-repeat: no-repeat;
background-color :
</style>
<title>豆知識のまとめのグルーバルメニューをjQueryでやってみる</title>
</head>
<body>
<div class='list'>
<dl>
<dt>トップ</dt><dd></dd>
<dt>世界の偉人</dt>
<dd>
<div class='mlist'>
<ul>
<li><a href='http://xn--k7yw82bmua.com/ijin/ainstain.html'>アインシュタイン</a></li>
<li><a href='http://xn--k7yw82bmua.com/ijin/ryouma.html'>坂本龍馬</a></li>
<li><a href='http://xn--k7yw82bmua.com/ijin/edison.html'>トーマス・エジソン</a></li>
<li><a href='http://xn--k7yw82bmua.com/ijin/teduka.html'>手塚治虫</a></li>
<li><a href='http://xn--k7yw82bmua.com/ijin/brucelee.html'>ブルース・リー</a></li>
<li><a href='http://xn--k7yw82bmua.com/ijin/leonardo.html'>レオナルド・ダ・ヴィンチ</a></li>
<li><a href='http://xn--k7yw82bmua.com/ijin/stevejobs.html'>スティーブ・ジョブズ</a></li>
<li><a href='http://xn--k7yw82bmua.com/ijin/oda_nobunaga.html'>織田信長</a></li>
<li><a href='http://xn--k7yw82bmua.com/ijin/miyamoto_musashi.html'>宮本武蔵</a></li>
<li><a href='http://xn--k7yw82bmua.com/ijin/Isaac_Newton.html'>アイザック・ニュートン</a></li>
</ul>
</div>
</dd>
<dt>音楽</dt>
<dd>
<div class='mlist'>
<ul>
<li><a href='http://xn--k7yw82bmua.com/music/bz.html'>B'z</a></li>
<li><a href='http://xn--k7yw82bmua.com/music/mrchildren.html'>Mr.Children</a></li>
<li><a href='http://xn--k7yw82bmua.com/music/tmn.html'>TM NETWORK （TMN）</a></li>
<li><a href='http://xn--k7yw82bmua.com/music/xjapan.html'>X Japan</a></li>
<li><a href='http://xn--k7yw82bmua.com/music/sazan.html'>サザンオールスターズ</a></li>
<li><a href='http://xn--k7yw82bmua.com/music/exile.html'>EXILE</a></li>
<li><a href='http://xn--k7yw82bmua.com/music/gackt.html'>Gackt</a></li>
</ul>
</div>
</dd>
<dt>漫画・アニメ</dt>
<dd>
<div class='mlist'>
<ul>
<li><a href='http://xn--k7yw82bmua.com/manga/drab.html'>ドラゴンボール</a></li>
<li><a href='http://xn--k7yw82bmua.com/manga/wanp.html'>ワンピース</a></li>
<li><a href='http://xn--k7yw82bmua.com/manga/lupin.html'>ルパン三世</a></li>
<li><a href='http://xn--k7yw82bmua.com/manga/kin29.html'>キン肉マン</a></li>
<li><a href='http://xn--k7yw82bmua.com/manga/hokuto.html'>北斗の拳</a></li>
<li><a href='http://xn--k7yw82bmua.com/manga/cap_tsubasa.html'>キャプテン翼</a></li>
<li><a href='http://xn--k7yw82bmua.com/manga/gundam.html'>機動戦士ガンダム</a></li>
<li><a href='http://xn--k7yw82bmua.com/manga/doraemon.html'>ドラえもん</a></li>
</ul>
</div>
</dd>
<dt>スポーツ・格闘</dt>
<dd>
<div class='mlist'>
<ul>
<li><a href='http://xn--k7yw82bmua.com/supo/anton.html'>アントニオ猪木</a></li>
<li><a href='http://xn--k7yw82bmua.com/supo/gatts.html'>ガッツ石松</a></li>
<li><a href='http://xn--k7yw82bmua.com/supo/ochiai.html'>落合博満</a></li>
<li><a href='http://xn--k7yw82bmua.com/supo/ichiro.html'>イチロー</a></li>
<li><a href='http://xn--k7yw82bmua.com/supo/kingkaz.html'>三浦知良</a></li>
<li><a href='http://xn--k7yw82bmua.com/supo/Mike_Tyson.html'>マイク・タイソン</a></li>
<li><a href='http://xn--k7yw82bmua.com/supo/oh_sadaharu.html'>王貞治</a></li>
<li><a href='http://xn--k7yw82bmua.com/supo/Darvish.html'>ダルビッシュ有</a></li>
</ul>
</div>
</dd>
<dt>お笑い</dt>
<dd>
<div class='mlist'>
<ul>
<li><a href='http://xn--k7yw82bmua.com/talent/takeshi.html'>ビートたけし（北野武）</a></li>
<li><a href='http://xn--k7yw82bmua.com/talent/sanma.html'>明石家さんま</a></li>
<li><a href='http://xn--k7yw82bmua.com/talent/tamori.html'>タモリ</a></li>
<li><a href='http://xn--k7yw82bmua.com/talent/downtown.html'>ダウンタウン</a></li>
<li><a href='http://xn--k7yw82bmua.com/talent/tonnerus.html'>とんねるず</a></li>
<li><a href='http://xn--k7yw82bmua.com/talent/ucchannanchan.html'>ウッチャンナンチャン</a></li>
<li><a href='http://xn--k7yw82bmua.com/talent/summers.html'>さまぁ〜ず</a></li>
</ul>
</div>
</dd>
<dt>映画</dt>
<dd>
<div class='mlist'>
<ul>
<li><a href='http://xn--k7yw82bmua.com/Movie/starwars.html'>スターウォーズ</a></li>
<li><a href='http://xn--k7yw82bmua.com/Movie/backtothefuture.html'>バック・トゥ・ザ・フューチャー</a></li>
<li><a href='http://xn--k7yw82bmua.com/Movie/shawshank.html'>ショーシャンクの空に</a></li>
<li><a href='http://xn--k7yw82bmua.com/Movie/TITANIC.html'>タイタニック</a></li>
<li><a href='http://xn--k7yw82bmua.com/Movie/SpiderMan.html'>スパイダーマン</a></li>
<li><a href='http://xn--k7yw82bmua.com/Movie/Harry_Potter.html'>ハリー・ポッター</a></li>
<li><a href='http://xn--k7yw82bmua.com/Movie/Pirates_of_the_Caribbean.html'>パイレーツ・オブ・カリビアン</a></li>
</ul>
</div>
</dd>
<dt>ゲーム</dt>
<dd>
<div class='mlist'>
<ul>
<li><a href='http://xn--k7yw82bmua.com/game/mario.html'>マリオブラザーズ</a></li>
<li><a href='http://xn--k7yw82bmua.com/game/Dragon_Quest.html'>ドラゴンクエスト</a></li>
<li><a href='http://xn--k7yw82bmua.com/game/FINAL_FANTASY.html'>ファイナルファンタジー</a></li>
<li><a href='http://xn--k7yw82bmua.com/game/Pac_Man.html'>パックマン</a></li>
<li><a href='http://xn--k7yw82bmua.com/game/puyopuyo.html'>ぷよぷよ</a></li>
</ul>
</div>
</dd>
<div id='memo'>
<dt>豆知識メモ</dt>
<dd>
<div class='mlist'>
<ul>
<li><a href='http://xn--k7yw82bmua.com/c_memo/2012-07-12.html'>2012-07-12 豆知識メモ</a></li>
<li><a href='http://xn--k7yw82bmua.com/c_memo/2012-07-13.html'>2012-07-13 豆知識メモ</a></li>
</ul>
</div>
</dd>
</div>
</dl>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" >
$(function(){
$("dd:not(:first)").css("display","none");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dd").slideUp("first");
$("+dd",this).slideDown("first");
}}); });
</script>
</body>
</html>
