CSS实现三级菜单

最新推荐文章于 2024-06-17 09:40:09 发布

我是一只萌新小菜鸟

最新推荐文章于 2024-06-17 09:40:09 发布

阅读量736

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/Denghalou/article/details/100654707

版权

本文详细介绍了如何使用纯CSS实现三级导航菜单，通过选择器的精妙应用，实现菜单项的展开与收起，同时确保在不同设备上具有良好的响应性。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三级菜单</title>
		
		<style>
			*{
				padding: 0px;
				margin: 0px;
				cursor: pointer;
			}
			
			ul{
				list-style: none;
			}
			
			.nav1{
				background-color: red;
				display: inline-block;
				position: absolute;
				width: 160px;
			}
			
			.nav2{
				display: none;
				background-color: blue;
				position: relative;
				width: 160px;
			}
			
			.nav3{
				display: none;
				background-color: green;
				position: absolute;
				width: 160px;
				left: 160px;
				top: 0px;
			}
			
			.nav1 li:hover .nav2{
				display: block;
			}
			.nav2 li:hover .nav3{
			 	display: block;
			}
			
		</style>
		
	</head>
	<body>
		
		<ul class="nav1">
			<li>
				<span>1-1</span>
				<ul class="nav2">
					<li>
						<span>1-2-1</span>