jQueryで3階層以上のドロップダウンメニューを表示可能なプラグインを見つけましたので、ご紹介いたします。こちらは水平（横）のメニューになります。

droppy  - Nested drop down menus

さっそくテストしてみました！

動作がスムーズで、かつ見栄えも良く、使えるメニューではないでしょうか。

なんといってもリストのネストに柔軟に対応しているところが嬉しいですね。私が試してみたのは4階層までですが、もっと深い階層でも実装可能です。（んが！見栄えやユーザビリティを考慮しますと、2.3階層くらいまでがベストかも。）

以前、「JQueryでサブ（階層）メニューを表示する」でご紹介したSuckerFish Styleよりより深い階層に対応してる分、若干使い勝手が良い感じです。

以下、実装手順です。
（必要なファイルは、droppy  - Nested drop down menusよりダウンロード出来ます。）

1.　head内に以下のjsファイルへのリンクを記述する

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

2.　リストのHTMLを記述する

<ul id="nav">
  <li><a href="#item1">ホーム</a></li>
  <li><a href="#">ゲーム</a>
    <ul>
      <li><a href="#">DS→</a>
        <ul>
          <li><a href="#">ゲームソフト</a></li>
          <li><a href="#">本体</a></li>
          <li><a href="#">周辺機器→</a>
            <ul>
              <li><a href="#">ケーブル・アダプター</a></li>
              <li><a href="#">コントローラー→</a>
                <ul>
                   <li><a href="#">ジョイスティック</a></li>
                   <li><a href="#">ハンドル</a></li>
                </ul>
              </li>
              <li><a href="#">メモリーカード</a>
              <li><a href="#">ケース・収納</a>
              <li><a href="#">クリーナー</a>
              <li><a href="#">その他</a>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">PSP</a></li>
      <li><a href="#">PS3</a></li>
      <li><a href="#">Xbox360</a></li>
      <li><a href="#">Wii</a></li>
    </ul>
  </li>

	（中略）

  <li><a href="#item4">家電</a>
    <ul>
       <li><a href="#item4.1">カメラ</a></li>
       <li><a href="#item4.2">オーディオ</a></li>
       <li><a href="#item4.3">生活家電</a></li>
    </ul>
  </li>
</ul>

3.　スタイルシートを記述する
※ほぼ本家のサンプルと同じスタイルですが、IE6と7でドロップしたリスト項目にマージンが出来たため、IEのハックを追加しています。（/* IE6ハック */と/*IE7ハック */のところ）
後、リストに透明度を指定してありましたが（opacity: 0.9; filter: alpha(opacity=90)のところ）、フォントがジャギジャギしているのが少し気になったので、私のサンプルでは外しています。

/* Basic code - don't modify */

#nav { display: block; margin: 0; padding: 0; position: relative; }
#nav li { display: block; list-style: none; margin: 0; padding: 0; float: left; position: relative; }
#nav a { display: block; }
#nav ul { display: none; position: absolute; left: 0; margin: 0; padding: 0; }
* html #nav ul { line-height: 0; } /* IE6 "fix" */
#nav ul a { zoom: 1; } /* IE6/7 fix */
#nav ul li { float: none; }
#nav ul ul { top: 0; }

/* Essentials - configure this */

#nav ul { width: 130px; }
#nav ul ul { left: 131px; }

/* Everything else is theming */

#nav { background-color: #666; height: 24px; }
#nav *:hover { background-color: none; }
#nav a { border-right: 1px solid white; color: white; font-size: 12px; padding: 6px; line-height: 1; }
#nav li.hover a { background-color: #fe4902; }
#nav ul { top: 25px; }
#nav ul li a { background-color: #fe4902; }
#nav ul a.hover { background-color: #fe4902; }
#nav ul a { border-bottom: 1px solid white; border-right: none; }
* html #nav ul li  { margin-bottom: -3px; } /* IE6ハック */
*:first-child+html #nav ul li  { margin-bottom: -4px; }/*IE7ハック */

4.　jQueryのコードを記述する

<script type='text/javascript'>
  $(function() {
    $('#nav').droppy();
  });
</script>

以上です。
見栄えなどはスタイルシートで細かくカスタマイズ可能ですし、リストが階層構造になっているのでメンテナンスもやりやすいのが嬉しいですね。

以上、3階層以上のドロップダウンメニューを表示する「droppy」！のご紹介でした！

こちらもあわせてどうぞ！

• [jQuery]自由自在！マウスオーバーで背景画像と文字色がフェードで切り変わるメニューColor Fading Menu
• [jQuery]くるくる回転！？キュートな水平メニューFancy Navigation withCSS & jQuery！
• jQueryを使用してボックスを上下左右中央に配置する
• JQueryでサブ（階層）メニューを表示する
• CSSで作るセクシーなメニュー！