三级导航

最新推荐文章于 2023-08-12 13:07:06 发布

原创最新推荐文章于 2023-08-12 13:07:06 发布 · 7.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css三级导航

css 专栏收录该内容

5 篇文章

订阅专栏

博客分享了CSS三级导航的实现思路，主要涉及hover和定位的应用。从一级导航开始设置宽高，二级导航让高度由后续元素撑起，三级导航相对于二级导航进行绝对定位，还提醒了absolute定位的规则，最后附上代码希望大家指出不足。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三级导航算是一个比较常见的网页结构，下面想把自己弄了很久的三级导航的思路再理一下(主要是hover和定位的应用)~方便日后回顾。（代码附在文本下方）
整体先从一级导航开始，设置了五个一级导航，给导航设置了相应的宽，高度（.titl中设置）~因为二级导航会扩展竖直方向上整体的高度，所以.list1_sty1的heigtht设置为auto让它的高度被后续元素撑起来三级导航只要设置一个绝对定位(absolute)相对于二级导航（relative）设置top left
这里注意 absolute是对于最近的可定位元素来定位的，如果没有设置就针对于body进行定位~
下面是具体的代码_{不足希望大家指出}


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
	*{
		margin: 0px;
		padding: 0px;
	}
	.page{
		width: 900px;
		height: 800px;
		font-family: '微软雅黑';
		font-weight: bold;
	}
	.list_1{
			width: 160px;
			height: auto;
			position: fixed;
			left: 0;
			top: 50%;
			margin-top: -105px;
			cursor: pointer;
		}
		.list_1_style{
			width: 160px;
			height: auto;
			border-bottom: 1px solid #eee;
			border: 1px solid #eee;
			line-height: 40px;
			text-align: center;
			
		}
		.list_1_style ul{
			width: 160px;
			height: auto;
			border: 1px solid #eee;
			display: none;
			position: relative;
		}
		.list_1_style ul li{
			width: 160px;
			height: 40px;
			list-style: none;
			text-align: center;
			line-height: 40px;
			border-bottom: 1px solid #eee;
		}

		.titl{
			width: 160px;
			height: 40px;
		}
		.list_1_style:hover ul{
			display: block;
		}
		.special{
			border-top: 1px solid #eee;
		}
		.list-3{
			width: 160px;
			height: auto;
			position: absolute;
			top: 0px;
			left: 160px;
			border: 1px solid #eee;/*要把定位模式设在盒子容器里*/
			display: none;
		}

		.list3dom{
			width: 160px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-bottom: 1px solid #eee;

		}
		.special:hover .list-3{/*因为在list-3里面设置了display none 所以这里对应回去display block  hover前面的是鼠标经过的元素*/
			display: block;
		}
	</style>
</head>
<body>
	<div class="page">
		<div class="list_1">
			<div class="list_1_style">
				<div class="titl">
					一级导航
				</div>
				<ul>
					<li class="special">二级导航1
						<div class="list-3">
							<div class="list3dom">
								导航3
							</div>
							<div class="list3dom">
								导航3
							</div>
							<div class="list3dom">
								导航3
							</div>
							<div class="list3dom">
								导航3
							</div>
							<div class="list3dom">
								导航3
							</div>
						</div>
					</li>
					<li>二级导航1
					</li>
					<li>二级导航1
					</li>
					<li>二级导航1
					</li>
					<li>二级导航1
					</li>
				</ul>
			</div>
			<div class="list_1_style">
				<div class="titl">
					一级导航
				</div>
				<ul>
					<li class="special">二级导航2</li>
					<li>二级导航2</li>
					<li>二级导航2</li>
					<li>二级导航2</li>
					<li>二级导航2</li>
				</ul>
			</div>
			<div class="list_1_style">
				<div class="titl">
					一级导航
				</div>
				<ul>
					<li class="special">二级导航3</li>
					<li>二级导航3</li>
					<li>二级导航3</li>
					<li>二级导航3</li>
					<li>二级导航3</li>
				</ul>
			</div>
			<div class="list_1_style">
				<div class="titl">
					一级导航
				</div>
				<ul>
					<li class="special">二级导航4</li>
					<li>二级导航4</li>
					<li>二级导航4</li>
					<li>二级导航4</li>
					<li>二级导航4</li>
				</ul>
			</div>
			<div class="list_1_style">
				<div class="titl">
					一级导航
				</div>
				<ul>
					<li class="special">二级导航5</li>
					<li>二级导航5</li>
					<li>二级导航5</li>
					<li>二级导航5</li>
					<li>二级导航5</li>
				</ul>
			</div>
		</div>
		
	</div>
</body>
</html>

加油_加油