jQuery多级下拉菜单特效

使用方法

css代码：

<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">    
<link rel="stylesheet" href="css/datouwang.css" />

js代码

<script type="text/javascript" src="js/jquery.min.js"></script>    
<script type="text/javascript" src="js/datouwang.js" ></script>

html结构

<div class="s-side">    
	<ul>    
		<!--这部分是导航栏信息。-->    
		<li class="s-firstItem first">    
			<a href="#">    
				<i class="fa fa-home"></i>    
				<span>首页</span>    
			</a>    
		</li>    
		<li class="first">    
			<div class="d-firstNav s-firstNav clearfix">    
				<i class="fa fa-bars"></i>    
				<span>一级菜单</span>    
				<i class="fa fa-caret-right fr "></i>    
			</div>    
			<ul class="d-firstDrop s-firstDrop">    
				<li>    
					<div class="d-secondNav s-secondNav">    
						<i class="fa fa-minus-square-o"></i>    
						<span>二级菜单</span>    
						<i class="fa fa-caret-right fr"></i>    
					</div>    
					<ul class="d-secondDrop s-secondDrop">    
						<li class="s-thirdItem">    
							<a href="#">三级导航</a>    
						</li>    
						<li class="s-thirdItem">    
							<a href="#">三级导航</a>    
						</li>    
					</ul>    
				</li>    
				<li>    
					<div class="d-secondNav s-secondNav">    
						<i class="fa fa-minus-square-o"></i>    
						<span>二级菜单</span>    
						<i class="fa fa-caret-right fr "></i>    
					</div>    
					<ul class="d-secondDrop s-secondDrop">    
						<li class="s-thirdItem">    
							<a href="#">三级导航</a>    
						</li>    
					</ul>    
				</li>    
				<li class="s-secondItem">    
					<a href="#">    
						<i class="fa fa-minus-square-o"></i>    
						<span>二级导航</span>    
					</a>    
				</li>    
			</ul>    
		</li>    
		<li class="first">    
			<div class="d-firstNav s-firstNav">    
				<i class="fa fa-bars"></i>	                        
				<span>一级菜单</span>    
				<i class="fa fa-caret-right fr" ></i>    
			</div>    
			<ul class="d-firstDrop s-firstDrop">    
				<li class="s-secondItem">    
					<i class="fa fa-minus-square-o"></i>    
					<a href="#">二级导航</a>    
				</li>    
				<li class="s-secondItem">    
					<i class="fa fa-minus-square-o"></i>    
					<a href="#">二级导航</a>    
				</li>    
			</ul>    
		</li>    
	</ul>    
</div>