ドロップダウンメニューを作成する

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">
var timeout = 500;
var closetimer;
var current;
//サブメニュー表示
function dropnav_open(){
	dropnav_canceltimer();
	dropnav_close();
	current = $(this).find('ul').css('visibility', 'visible');
}
function dropnav_close(){
	if (current) 
		current.css('visibility', 'hidden');
}
//mouseout後0.5秒後にサブメニューを閉じる
function dropnav_timer(){
	closetimer = window.setTimeout(dropnav_close, timeout);
}
//タイマー値をクリアーする
function dropnav_canceltimer(){
	if (closetimer) {
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}
$(document).ready(function(){
   //jQueryのbind関数は指定された要素に、イベントを追加し、イベント発生時に実行する関数を指定する
	$('#dropnav > li').bind('mouseover', dropnav_open);
	$('#dropnav > li').bind('mouseout', dropnav_timer);
	$(document).bind('click', dropnav_close);
});
</script>
<style type="text/css">
#dropnav {
    margin: 0 auto;
	width:auto;
}
#dropnav li {
    float: left;
    list-style: none;
}
#dropnav li a {
    display: block;
    background: #43676b;
    padding: 7px 14px;
    text-decoration: none;
    border-right: 1px solid #fff;
    width: 90px;
    color: #fff;
    white-space: nowrap
}
#dropnav li a:hover {
    background: #80989b
}
#dropnav li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    visibility: hidden;
    border-top: 1px solid white
}
#dropnav li ul li {
    float: none;
    display: inline
}
#dropnav li ul li a {
    width: 90px;
    background: #767c6b
}
#dropnav li ul li a:hover {
    background: #888e7e
}
</style>
</head>
<body>
<ul id="dropnav">
<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>
		<li>
			<a href="#">Sub Menu 1_3</a>
		</li>
	</ul>
</li>
</ul>
</body>
</html>