jQuery の Accordionプラグイン を使用して、アコーディオン型メニューを表示するを表示します。
背景等はCSSで指定しています。
jQuery plugin: Accordion のページから、プラグイン、CSS、デモ等をZIP形式でダウンロードできます。

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

サンプル

サンプルソース

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.dimensions.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery.easing.js"></script>
<script type="text/javascript" src="http://www.strollnet.com/js/jquery/jquery.accordion.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.strollnet.com/js/jquery/accordion.css">

<script type="text/javascript">
<!--
   jQuery().ready(function(){
      jQuery('#navigation').accordion({
         active: '.selected',
      //   active: false,
         header: '.head',
         navigation: true,
      //   event: 'mouseover',
         fillSpace: true,
      //   animated: 'easeslide'
         animated: "bounceslide",
      });
   });
//-->
</script>

HTML

<div style="height:250px;margin-bottom:1em;">
   <ul id="navigation">
      <li>
         <a class="head" href="#">Guitar</a>
         <ul>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
         </ul> 
      </li>
      <li>
         <a class="head" href="#">Bass</a>
         <ul>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
         </ul> 
      </li>
      <li>
         <a class="head selected" href="#">H</a>
         <ul>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
            <li><a href="./">sample</a></li>
         </ul> 
      </li>
   </ul>
</div>