制作下拉菜单Tips&相关知识点复习

制作多级菜单

在第一层<li>标签下添加<ul>标签，创建二级菜单，在第二层<li>标签下添加<ul>标签，创建三级菜单…以此类推。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
   <ul class="top_nav">          
	<li><a href="#">课程大厅</a> <!--一级菜单-->
		<ul>                  
			<li><a href="#">前端课程</a> <!--二级菜单-->
				<ul>          
					<li><a href="#">html</a></li> <!--三级菜单-->
					<li><a href="#">css</a></li>
					<li><a href="#">javascript</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">学习中心</a></li>
	<li><a href="#">关于我们</a></li>
</ul>

对所有li元素设置position：relative，对li元素下的子元素ul设置position：absolute，使下一级菜单相对于上一级菜单定位。

Read More