jQuery垂直下拉多级菜单

一款jQuery垂直下拉多级菜单，这里建议设置共3级菜单就可以了，当然也可以设置多级的效果，只要有子菜单的都可以点击展开或者伸缩，实用性还是挺强的，喜欢的小伙伴们请收下吧。

分类：导航菜单 > 下拉导航难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的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>