よくあるjQueryのドロップダウンメニューです。
サンプル

今回はSmooth Navigational Menuというものを使用します。

ダウンロード

まず↓サイトから
jquery.js
http://jquery.com/
をダウンロードし、
次に↓サイトから
Smooth Navigational Menu
http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
それぞれ以下のファイルをダウンロード

・ddsmoothmenu.js (必須)
・ddsmoothmenu.css (一応必須)
・ddsmoothmenu-v.css (縦メニュー用)
・あとimage画像が2つありますがそちらはお好みで

Javascriptの記述

実装したいページに

<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/smoothmenu.js"></script>

<script type="text/javascript">
/*横メニュー用*/
ddsmoothmenu.init({
	mainmenuid: "id名を記述(デフォルトはsmoothmenu1)", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'クラス名を記述(デフォルトはddsmoothmenu)', //class added to menu's outer DIV
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

/*縦メニュー用*/
ddsmoothmenu.init({
	mainmenuid: "id名を記述(デフォルトはsmoothmenu2)", //Menu DIV id
	orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'クラス名を記述(デフォルトはddsmoothmenu-v)', //class added to menu's outer DIV
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>
</head>

と記述。

htmlの記述

↑で指定したid名とクラス名で、

横メニューの場合

<h2>横メニュー</h2>

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="#">メニュー 0</a></li>
<li><a href="#">メニュー 1</a>
  <ul>
  <li><a href="#">サブメニュー 1.1</a></li>
  <li><a href="#">サブメニュー 1.2</a></li>
  <li><a href="#">サブメニュー 1.3</a></li>
  <li><a href="#">サブメニュー 1.4</a></li>
  </ul>
</li>
<!--中略-->
<li><a href="#">メニュー 4</a>
  <ul>
  <li><a href="#">サブメニュー 4.2</a>
    <ul>
    <li><a href="#">サブメニュー 4.2.1</a></li>
    <li><a href="#">サブメニュー 4.2.3</a>
		<ul>
    		<li><a href="#">サブメニュー 4.2.3.1</a></li>
    		<li><a href="#">サブメニュー 4.2.3.2</a></li>
    		<li><a href="#">サブメニュー 4.2.3.3</a></li>
    		<li><a href="#">サブメニュー 4.2.3.4</a></li>
    		<li><a href="#">サブメニュー 4.2.3.5</a></li>
		</ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
</ul>
</div>

縦メニューの場合

<h2 style="margin-top:200px">縦メニュー</h2>

<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
<li><a href="#">メニュー 0</a></li>
<li><a href="#">メニュー 1</a>
  <ul>
  <li><a href="#">サブメニュー 1.1</a></li>
  <li><a href="#">サブメニュー 1.2</a></li>
  <li><a href="#">サブメニュー 1.3</a></li>
  <li><a href="#">サブメニュー 1.4</a></li>
  </ul>
</li>
<!--中略-->
<li><a href="#">メニュー 4</a>
  <ul>
  <li><a href="#">サブメニュー 4.2</a>
    <ul>
    <li><a href="#">サブメニュー 4.2.1</a></li>
    <li><a href="#">サブメニュー 4.2.3</a>
		<ul>
    		<li><a href="#">サブメニュー 4.2.3.1</a></li>
    		<li><a href="#">サブメニュー 4.2.3.2</a></li>
    		<li><a href="#">サブメニュー 4.2.3.3</a></li>
    		<li><a href="#">サブメニュー 4.2.3.4</a></li>
    		<li><a href="#">サブメニュー 4.2.3.5</a></li>
		</ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
</ul>
</div>

という感じに記述。

カスタマイズ

smoothmenu.jsのカスタマイズ

arrowimages: {down:['downarrowclass', 'img/down.gif', 23], right:['rightarrowclass', 'img/right.gif']},//矢印等の画像の指定

transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds

shadow: {enable:true, offsetx:5, offsety:5}, //ドロップシャドウをつけるかどうかとそのサイズ(シャドウをつけないならfalseを指定)

showhidedelay: {showdelay: 100, hidedelay: 200}, //set delay in milliseconds before sub menus appear and disappear, respectively

上記以外の部分も色々いじれるから後は自分の好みで。

あとはCSSなどでデザインをいじればOK。

参考サイト

Dynamic Drive