saber 酱的抱枕

superfish是一个jQuery插件，可以用来制作多级下拉菜单。来看看是怎么用的：

首先引入所需的文件：

<link href="/f/superfish.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script src="/f/superfish.js"></script>

引用的superfish.css只是负责样式表现的，我建议引入，然后自己覆盖规则来修改。

html结构则使用ul和li来编制层次：

<ul class="sf-menu">
	<li>
		<a href="">动漫<span class="sf-sub-indicator"> »</span></a>
		<ul>
			<li><a href="">龙与虎</a></li>
			<li><a href="">fate</a></li>
		</ul>
	</li>
	<li>
		<a href="">人物<span class="sf-sub-indicator"> »</span></a>
		<ul>
			<li>
				<a href="">夏娜<span class="sf-sub-indicator"> »</span></a>
				<ul>
					<li><a href="">出自灼眼的夏娜</a></li>
					<li>
						<a href="">名字叫傻娜<span class="sf-sub-indicator"> »</span></a>
						<ul>
							<li><a href="">其实是shana</a></li>
						</ul>
					</li>
					
				</ul>
			</li>
			<li>
				<a href="">saber<span class="sf-sub-indicator"> »</span></a>
				<ul>
					<li><a href="">本名阿尔托莉雅</a></li>
					<li><a href="">武器为石中剑和湖中间</a></li>
					<li><a href="">吃我EX咖喱棒！</a></li>
				</ul>
			</li>
			<li>
				<a href="">六花<span class="sf-sub-indicator"> »</span></a>
				<ul>
					<li><a href="">中二的典范</a></li>
					<li><a href="">六花最可爱了</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

ul的class不是必须用这个指定的，用这个只是为了使用superfish.css里面的规则。如不需要可以改成别的。span标签用来提醒用户这里有子菜单，也可以随意删改。主要的部分只需要ul和li的结构。

最后调用superfish：

<script type='text/javascript'>
    $(document).ready(function() {
        $('sf-menu').superfish();
    });
</script>

查看demo 下载superfish 参考更多

使用superfish制作多级下拉菜单