ドロップダウンメニュー

jQuery javascript css2.1

あえてhtml5のタグは使わずやってみた（dtdは面倒なのでhtml5のまま）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<script src="../js/jquery-1.7.2.min.js"></script>
<script src="js/common.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
	<div id="container">
  	<ul id="top_level">
    	<li><a href="#">レベル１メニュー１</a>
      	<ul class="lower">
        	<li><a href="#">レベル２メニュー１</a></li>
        	<li><a href="#">レベル２メニュー２</a></li>
        	<li><a href="#">レベル２メニュー３</a>
		      	<ul class="lower">
		        	<li><a href="#">レベル３メニュー１</a></li>
		        	<li><a href="#">レベル３メニュー２</a></li>
		        	<li><a href="#">レベル３メニュー３</a></li>
		        </ul>
          </li>
        </ul>
      </li>
    	<li><a hre="#">レベル１メニュー２</a>
      	<ul class="lower">
        	<li><a href="#">レベル２メニュー１</a></li>
        	<li><a href="#">レベル２メニュー２</a>
		      	<ul class="lower">
		        	<li><a href="#">レベル３メニュー１</a></li>
		        	<li><a href="#">レベル３メニュー２</a></li>
		        	<li><a href="#">レベル３メニュー３</a></li>
		        </ul>
          </li>
        	<li><a href="#">レベル２メニュー３</a></li>
        </ul>
      </li>
    	<li><a href="#">レベル１メニュー３</a>
      	<ul class="lower">
        	<li><a href="#">レベル２メニュー１</a>
		      	<ul class="lower">
		        	<li><a href="#">レベル３メニュー１</a></li>
		        	<li><a href="#">レベル３メニュー２</a></li>
		        	<li><a href="#">レベル３メニュー３</a></li>
		        </ul>
          </li>
        	<li><a href="#">レベル２メニュー２</a></li>
        	<li><a href="#">レベル３メニュー２</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
	list-style-type:none;
}
html {
    overflow-y:scroll; //常にスクロールバーを表示する
}

#container{
	margin:100px auto;
	width:537px;
}

#top_level li{
	float:left;
	width:179px;
	height:48px;
	background:url(../images/btn.png);
	position:relative;
}

* html #top_level li{
	display:inline;
	zoom:1;
}
*+html #top_level li{
	display:inline;
	zoom:1;
}

#top_level li a{
	display:block;
	width:100%;
	height:100%;
	line-height:48px;
	text-indent:30px;
	font-weight:bold;
	color:#CFDFB5;
	text-decoration:none;
	position:relative;
}

#top_level li a:hover{
	background:url(../images/btn_over.png);
}


ul.lower{
	display:none;
}
* html ul.lower{
	zoom:1;
	position:relative;
}
*+html ul.lower{
	zoom:1;
	position:relative;
}
ul.lower li{
	float:none;
}
ul.lower li ul.lower{
	position:absolute;
	left:179px;
	top:0;
}


#top_level{
	zoom:1;
}

// JavaScript Document
$(function(){
	$("#top_level li").hover(function(){
		$(">ul:not(:animated)",this).slideDown("fast");
	},
	function(){
		$(">ul",this).slideUp("fast");
	});
});