jqueryで作るプルダウンメニューを以前（こちら）紹介したのですが、今回は2階層プルダウンをするやり方です。このやりかたで何階層までも作っていけます。
html
<ul id="menu"> <li><a href="">メニュー</a> <ul id="sub"> <li><a href="">サブメニュー</a></li> <li><a href="">サブメニュー</a></li> <li><a href="">サブメニュー</a> <ul id="sub"> <li><a href="">サブサブメニュー</a></li> <li><a href="">サブサブメニュー</a></li> <li><a href="">サブサブメニュー</a></li> </ul> </li> </ul> </li> <li><a href="">メニュー</a> <ul id="sub"> <li><a href="">サブメニュー</a></li> <li><a href="">サブメニュー</a></li> <li><a href="">サブメニュー</a></li> </ul> </li> </ul>
liの中にもう１階層サブメニューを入れます。
CSS
スタイルシートです。
ul,li{margin:0; padding:0;}
ul#menu{margin:10px auto; width:360px;}
ul#menu li{float:left; width:180px; height:48px; background-color:#2b76cc;
list-style:none; text-align:center; border-bottom:1px solid #666; position:relative;}
ul#menu li a{display:block; width:178px; height:100%; line-height:48px;
color:#fff; text-decoration:none; border:1px solid #fff; position:relative;
border-top:none}
ul#sub li{float:none;}
ul#sub li ul#sub{position:absolute; left:180px; top:0;}
position:relativeとposition:absoluteを使うことで、サブメニューの中のサブメニューをメニューの横に配置できるようにしてあります。
jquery
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.6.4');</script>
<script type="text/javascript">
$(function(){
$("#sub").hide();
$("#menu li").hover(function(){
$(">ul:not(:animated)", this).slideDown();},
function(){$(this).children("ul").slideUp();});
});
</script>
一つ一つ解説していくと、
$("ul#sub").hide();
でul #subの中の部分を全て隠します。
$("#menu li").hover(function(){
#menu のliを触ったときにhoverイベントが起こります。
.hover({ポイントを上に置いたとき},{ポイントが離れたとき})
hoverイベントは左がポイントを上に置いたとき、右がポイントが離れたときに何にかイベントを起こせます。
まずは、ポイントを上に置いたとき
function(){$(">ul:not(:animated)", this).slideDown();}
>ulで子要素のulを指定しています。
※子要素（要素の中にある要素）要素はhtmlのタグみたいなイメージで、
今回は、liの中にあるulを示しています。
<li><a href="">メニュー</a> <ul id="sub"> <li><a href="">サブメニュー</a></li> </ul> </li>
#menu liの中のulでslideDown：ポイントを上に置いたときにメニューが下にさがるイベントが起こります。
:not(:animated)
はulがslideDownのイベントが起こっているときに何度も同じイベントが起こらないようにしています。
ポイントを離したとき
function(){$(this).children("ul").slideUp();}
>ulと.children("ul")は同じ意味で、#menu liの中のulでslideUp：メニューが上にスライドして、元に戻ります。
前回の場合は
$("#menu>li")
$("ul#sub",this)
ul#menuの直下のliのul#subでプルダウンメニューのイベントが起こるようになっていたのですが、
$("#menu li")
$(">ul",this)
ul#menuの中にあるliの中のul全てにプルダウンメニューのイベントが起こるようになっています。
そのため、さらに、liの中にulを何階層も書いていけば、プルダウンメニューが何階層にも作っていくことができます。