【CSS】手把手教你写三级列表

首先完成一级列表列表布局

<div class="wrapper">
			<ul class="nav">
				<li>
					<a href="#">列表一</a>
				</li>
				<li>
					<a href="#">列表二</a>
				</li>
				<li>
					<a href="#">列表三</a>
				</li>
				<li>
					<a href="#">列表四</a>
				</li>
				<li>
					<a href="#">列表五</a>
				</li>
				<li>
					<a href="#">列表六</a>
				</li>
			</ul>
		</div>

给一级列表添加CSS：

           *{
				margin: 0px;
				padding: 0px;
			}
			li{
				list-style: none;
			}
			a {
				text-decoration: none;
			}
			
			.wrapper{
				/* 设置导航栏宽高，水平居中 */
				width: 600px;
				height: 50px;
				margin: 0 auto;
				/* 设置喜欢的背景颜色 */
				background-color: #333;
			}
			.nav>li{
				/* 左浮动，将li标签水平排列 */
				float: left;
			}
			.nav li{
				/* 设置li宽高，背影颜色与导航栏一致 */
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: #333;
			}
            .nav>li a{
                /* 设置字体颜色 */
				color: white;
			}
            .nav li:hover{
				/* 鼠标指向该位置时的背景颜色 */
				background-color: crimson;
			}

此时的效果图：

 

在一级列表的 <li></li>标签下添加二级列表布局

                    <ul class="subnav">
						<li>
							<a href="#">唱歌</a>
						</li>
						<li>
							<a href="#">跳舞</a>
						</li>
						<li>
							<a href="#">游泳</a>
						</li>
					</ul>

 为二级标签添加CSS样式

            .nav>li:hover>a{
				/* 鼠标在该位置时改变字体颜色 */
				color: aqua;
			}
			.subnav{
				/* 隐藏二级列表 */
				display: none;
			}
			.nav li:hover>.subnav{
				/* 鼠标指向该位置时二级列表出现 */
				display: block;
			}
			
			.subnav>li:hover>a{
				/* 改变鼠标指向二级列表时的字体颜色 */
				color: aqua;
			}

此时页面效果：

 在二级列表的<li></li>标签下添加三级列表布局

    <ul class="thinav">
		<li><a href="#">流行歌</a></li>
		<li><a href="#">古典歌</a></li>
		<li><a href="#">民摇</a></li>
	</ul>

三级列表CSS 样式

            .subnav>li{
				/* 先对二级列表的<li>标签定位 */
				position: relative;
			}
			.thinav{
				/* 对三级列表定位并隐藏 */
				position: absolute;
				top: 0px;
				left: 100px;
				display: none;
			}
			.subnav>li:hover>.thinav{
				/* 鼠标在指定位置时三级列表出现 */
				display: block;
			}
			.thinav>li:hover>a{
				/* 改变鼠标放上去的字体颜色 */
				color: aqua;
			}

此时效果：

一个简单的三级列表这样就作好了。需要注意的是一定要把下级列表插在上级列表的<li></li>标签中的<a><a/>标签下方。