jQuery の Treeviewプラグイン を使用して、ツリー型メニューを表示します。
初期状態を全てまたは一部開いた状態にしたり、開く動作をアニメーションにしたり出来ます。
jQuery plugin: Treeview のページから、プラグイン、CSS、画像等をZIP形式でダウンロードできます。

対象プラグインを、下記より入手してください。
* jQuery
* jQuery plugin: Treeview

サンプル

サンプルソース

JavaScript + CSS

<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery.treeview.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.strollnet.com/js/jquery/css/treeview.css">

<script type="text/javascript">
<!--
   $(document).ready(function() {
      $("#navigation").treeview({
         persist: "location",
         collapsed: true,
         animated: "medium"
      });
   });
//-->
</script>

HTML

<ul id="navigation">
   <li><span>Item 1</span>
      <ul>
         <li><span>Item 1-1</span>
            <ul>
               <li><span>Item 1-1-1</span></a></li>
            </ul>
         </li>
         <li><span>Item 1-2</span></li>
         <li><span>Item 1-3</span>
            <ul>
               <li><span>Item 1-3-1</span>
                  <ul>
                     <li><span>Item 1-3-1-1</span></li>
                     <li><span>Item 1-3-1-2</span></li>
                     <li><span>Item 1-3-1-3</span></li>
                  </ul>
               </li>
               <li><span>Item 1-3-2</span>
                  <ul>
                     <li><span>Item 1-3-2-1</span></li>
                  </ul>
               </li>
               <li><span>Item 1-3-3</span>
                  <ul>
                     <li><span>Item 1-3-3-1</span></li>
                     <li><span>Item 1-3-3-2</span></li>
                     <li><span>Item 1-3-3-3</span></li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
   <li><span>Item 2</span>
      <ul>
         <li><span>Item 2-1</span>
            <ul>
               <li><span>Item 2-1-1</span>
               <ul>
                  <li><span>Item 2-1-1-1</span></li>
                  <li><span>Item 2-1-1-2</span></li>
               </ul>
            </li>
            </ul>
         </li>
         <li><span>Item 2-2</span>
            <ul>
               <li><span>Item 2-2-1</span>
               <ul>
                  <li><span>Item 2-2-1-1</span></li>
               </ul>
            </li>
               <li><span>Item 2-2-2</span>
               <ul>
                  <li><span>Item 2-2-1-1</span></li>
                  <li><span>Item 2-2-1-2</span></li>
                  <li><span>Item 2-2-1-3</span></li>
               </ul>
            </li>
               <li><span>Item 2-2-3</span>
               <ul>
                  <li><span>Item 2-2-3-1</span></li>
                  <li><span>Item 2-2-3-1</span></li>
                  <li><span>Item 2-2-3-1</span></li>
               </ul>
            </li>
            </ul>
         </li>
      </ul>
   </li>
   <li class="open"><span>Item 3</span>
      <ul>
         <li class="open"><span>Item 3-1</span>
            <ul>
               <li><span>Item 3-1-1</span></li>
               <li class="open"><span>Item 3-1-2</span>
                  <ul>
                     <li><span>Item 3-1-2-1</span></li>
                     <li><span>Item 3-1-2-1</span></li>
                  </ul>
               </li>
               <li><span>Item 3-1-3</span>
                  <ul>
                     <li><span>Item 3-1-3-1</span></li>
                     <li><span>Item 3-1-3-1</span></li>
                     <li><span>Item 3-1-3-1</span></li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>