页面的head部分首先引入两个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/base.css"> 
<link type="text/css" rel="stylesheet" href="css/menu.css">

接着引入jQuery库和menu_min.js文件，并启用menu插件，代码如下：

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/menu_min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
  $(".menu ul li").menu();
}); 
</script>

页面的body部分结构很清晰，看中文的字面意思就能明白了，代码如下：

<div class="menu">
	<ul>
		<li><a class="active" href="#">一级菜单 1</a>
			<ul style="display: block;">
				<li><a href="#">二级菜单 1</a></li>
				<li><a href="#">二级菜单 2</a>
					<ul>
						<li><a href="#">三级菜单 1</a></li>
						<li><a href="#">三级菜单 2</a></li>
						<li><a href="#">三级菜单 3</a></li>
						<li><a href="#">三级菜单 4</a></li>
					</ul>
				</li>
				<li><a href="#">二级菜单 3</a></li>
				<li><a href="#">二级菜单 4</a>
					<ul>
						<li><a href="#">三级菜单 1</a></li>
						<li><a href="#">三级菜单 2</a></li>
					</ul>
				</li>
				<li><a href="#">二级菜单 5</a></li>
			</ul>
		</li>
		<li><a href="#">一级菜单 2</a>
			<ul>
				<li><a href="#">二级菜单 1</a></li>
				<li><a href="#">二级菜单 2</a></li>
				<li><a href="#">二级菜单 3</a></li>
				<li><a href="#">二级菜单 4</a></li>
			</ul>
		</li>
		<li><a href="#">一级菜单 3</a>
			<ul>
				<li><a href="#">二级菜单 1</a></li>
				<li><a href="#">二级菜单 2</a></li>
				<li><a href="#">二级菜单 3</a></li>
				<li><a href="#">二级菜单 4</a></li>
				<li><a href="#">二级菜单 5</a></li>
				<li><a href="#">二级菜单 6</a></li>
			</ul>
		</li>
		<li><a href="#">一级菜单 4</a></li>
		<li><a href="#">一级菜单 5</a></li>
	</ul>
</div>