アコーディオンインターフェイスを作成する

jQuery JavaScript 
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){{
	//高さが不確定のものを記述した時にスムーズにアニメーションをする事が出来ないため
	//li要素全てにheightプロパティを取得し設定する
	$("ul li li").each(function(){
		$(this).css('height', $(this).height() + 'px');
	});
	$('#nav ul').hide();
	$('#nav ul:first').show();
	//li要素のa要素全てにclickイベントを追加する
	$('#nav li a').click(function(){
		var checkElement = $(this).next();
		if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
			return false;
		}
		//ul要素かつ表示されていない場合、アニメーションする
		if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
			$('#nav ul:visible').slideUp('normal');
			checkElement.slideDown('normal');
			return false;
		}
	});
}});
</script>
<style type="text/css">
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul#nav {
    margin: 0 auto;
    width: 500px;
    text-align: left;
}
ul#nav a {
    display: block;
    text-decoration: none;
}
ul#nav li {
    border-top: 1px #fff solid;
}
ul#nav li a {
    background: #1f3134;
    color: #fff;
    padding: 0.5em;
}
ul#nav li a:hover {
    background: #43676b;
}
ul#nav li ul li a {
    background: #efefef;
    color: #000;
    padding-left: 20px;
}
ul#nav li ul li a:hover {
    background: #e7e7eb;
    border-left: 5px #000 solid;
    padding-left: 15px;
}
</style>
</head>
<body>
<ul id="nav">
	<li>
		<a href="#">Menu 1</a>
		<ul>
			<li>
				<a href="#">Sub Menu 1_1</a>
			</li>
			<li>
				<a href="#">Sub Menu 1_2</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="#">Menu 2</a>
		<ul>
			<li>
				<a href="#">Sub Menu 2_1</a>
			</li>
			<li>
				<a href="#">Sub Menu 2_2</a>
			</li>
			<li>
				<a href="#">Sub Menu 2_3</a>
			</li>
		</ul>
	</li>
</ul>
</body>
</html>