※ ChatGPTを利用し、要約された質問です（原文：垂直型のドロップダウンメニューの作成方法について）
垂直型のドロップダウンメニューの作成方法について
このQ&Aのポイント
垂直型のドロップダウンメニューを作成する方法について詳しく解説します。
参考サイトを元に、垂直型のドロップダウンメニューのソースコードを作成しました。
第二階層や第三階層の内容が表示されない場合の対処方法についてもご紹介します。
http://jsajax.com/Articles/jQueryDropDownMenu2/1088を参考に下記のソースで垂直型のドロップダウンメニューを作成しました(動作はhttp://jsajax.com/Articles/jQueryDropDownMenu2/1088で「このサンプルを編集して試してみる」をクリックし、画面上部のテキストエリアに下記のソースを貼り付け「編集後クリックして実行！」で試す事が出来ます。
また、ローカルで試す場合は、ヘッダ部分に書かれているjsやcssをhttp://jdsharp.us/jQuery/plugins/jdMenu/やhttp://jquery.com/からダウンロードし、パスを調整していただければ大丈夫です)。
【ソース】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>jQuery - DropDown Menu - Vertical (jdMenu)</title>
<link href="jQuery/jdMenu/jquery.jdMenu.css" rel="stylesheet" type="text/css" />
<script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
<script src="jQuery/jdMenu/jquery.dimensions.js" type="text/javascript"></script>
<script src="jQuery/jdMenu/jquery.positionBy.js" type="text/javascript"></script>
<script src="jQuery/jdMenu/jquery.bgiframe.js" type="text/javascript"></script>
<script src="jQuery/jdMenu/jquery.jdMenu.js" type="text/javascript"></script>
</head>
<body>
<div>
<ul class="jd_menu jd_menu_vertical">
<li class="accessible"><a href="#" class="accessible">第１ ≫</a>
<ul>
<li><a href="#">第２－１ ≫</a>
<ul>
<li><a href="#" target="_blank">第２－１－１</a></li>
<li><a href="#" target="_blank">第２－１－２</a></li>
<li><a href="#" target="_blank">第２－１－３</a></li>
<li><a href="#" target="_blank">第２－１－４</a></li>
</ul>
</li>
<li><a href="#">第２－２ ≫</a>
<ul>
<li><a href="#" target="_blank">第２－２－１</a></li>
<li><a href="#" target="_blank">第２－２－２</a></li>
<li><a href="#" target="_blank">第２－２－３</a></li>
<li><a href="#" target="_blank">第２－２－４</a></li>
</ul>
</li>
<li><a href="#">第２－３ ≫</a>
<ul>
<li><a href="#" target="_blank">第２－３－１</a></li>
<li><a href="#" target="_blank">第２－３－２</a></li>
<li><a href="#" target="_blank">第２－３－３</a></li>
<li><a href="#" target="_blank">第２－３－４</a></li>
</ul>
</li>
<li><a href="#">第２－４ ≫</a>
<ul>
<li><a href="#" target="_blank">第２－４－１</a></li>
<li><a href="#" target="_blank">第２－４－２</a></li>
<li><a href="#" target="_blank">第２－４－３</a></li>
<li><a href="#" target="_blank">第２－４－４</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
ただし、実際に作ってみた所、今私が作っているサイトでは第二階層、第三階層の数が多く、
第一階層(上記ソースの「第１」)をマウスオーバーした際、すべての内容が表示されませんでした。
その為、下記のようなこと(縦だけではなく、横のスペースも有効に使いたい)を行いたいと思ったのですが、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。
【第二階層(第三階層)の現在のイメージ】
第２－１
第２－２
第２－３
第２－４
【第二階層(第三階層)のやりたいイメージ】
第２－１ 第２－２
第２－３ 第２－４
以上、よろしくお願いします。
補足
ご回答ありがとうございます。 イメージとしては下記を考えてます。 第２－１□第２－２ □□□□□□□□□ 第２－３□第２－４ その為、第２－１にマウスオーバー時、第２－１のサブメニューにより第２－２や２－４は隠れると思います。 ただし、□の部分をマウスオーバーする事で第２－１のサブメニューが消え、第２－２や第２－４をマウスオーバーするには支障はないと思います。 > ウィンドウの縦長さよりもメニューの数が多いということでしょうか？ はい、そういうことです。 教えて！gooを例にすると、http://oshiete.goo.ne.jp/のサイドメニューにカテゴリー一覧が表示されています。 ここで「ライフ」をクリックすると、http://oshiete.goo.ne.jp/category/214/が表示されます。 これをクリックではなく、マウスオーバーで表示したいというのが本件の希望となります。 例えば、ライフのペットの犬を選択したい場合、http://oshiete.goo.ne.jp/では、ライフをクリックしてhttp://oshiete.goo.ne.jp/category/214/に画面遷移した後、犬をクリックする必要があります。 これをhttp://oshiete.goo.ne.jp/でライフをマウスオーバーするとhttp://oshiete.goo.ne.jp/category/214/のような表示がされ、犬をクリックする事でhttp://oshiete.goo.ne.jp/category/531/に遷移したいと思います(http://oshiete.goo.ne.jp/からhttp://oshiete.goo.ne.jp/category/531/へ遷移する際、マウスクリック1回で遷移したいと思います)。 > ところで、 > 内容を見ていないのでわかりませんが、メニューのスクリプトにご提示のスクリプトが全部必要なのでしょうか？ > 「dimensions.js」、「positionBy.js」、「bgiframe.js」のスクリプト > それとも、他の用途で使ってらっしゃるのかな… http://jsajax.com/Articles/jQueryDropDownMenu2/1088で「このサンプルを編集して試してみる」をクリックし、「編集後クリックして実行！」で試す事が出来ますが、その3行をコメントアウトすると動作しなくなったため必要なようです。 以上、よろしくお願いします。