简单实现二级菜单

这里写自定义目录标题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
/* *{	
	margin:0 ;
	padding: 0;
	border:0;
	list-style-type: none;
	text-decoration: none;
	color:#000000;
}
ul{ 
	font-size:0;
	width:520px;
	margin:0 auto;
}
li{ background:#87CEEA;
	width:100px;
	height:50px;
	line-height: 50px;
	text-align: center;
	font-size: 16px;
	position: relative;
}
nav>ul>li{
display: inline-block	
}
nav>ul>li:hover{
	background:#04BCFD ;
}
li:hover a{
	color:#FFFFFF;
}
nav>ul>li:hover .ul-1{
	display: block;
}
.ul-1,.ul-2{
	position: absolute;
}
.ul-1,.ul-2{
display:none;
}
.ul-1>li{
	background: pink;
}
.ul-1>li>a{
	color:#000000;
}
.ul-1>li>a:hover .ul-1>li>a{
	color: #FFFFFF;
}
.ul-1>li:hover .ul-2{
	display:block;
}
.ul-2{
	left:100px;
	top:0px;
	
	width: 100px;
}
.ul-2>li{
	background: green;
}
.ul-2>li>a{
	color:#000000;
} */
*{
	margin:0;
	padding:0;
	}
nav{
	width:520px;
	margin:0 auto;
	height: 50px;
	background: #87CEEA;
	position: relative;
}
a{
	display:block;
	width:100px;
	height:50px;
	line-height: 50px;
	text-align: center;
	text-decoration: none;
	color:#000000;
}
li{
	list-style-type:none ;
	width:100px;
	height:50px;
	position: relative;
}
nav>ul>li>a:hover{
	background: #03BCFF;
	color:#ffffff;
}
nav>ul>li{
	display: inline-block;
	position: relative;
}
nav>ul>li:nth-of-type(2)>a:after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top:5px solid #000000;
	border-left: 5px solid rgba(250,250,250,0);
	border-right:5px solid rgba(250,250,250,0);
	position: absolute;
	top:25px;
	left:80px;
}
nav>ul>li:nth-of-type(2):hover>a:after{
	border-top:none;
	border-bottom:5px solid #FFFFFF;
	
}
.ul-1,.ul-2{
	display: none;
	position: absolute;
}
nav>ul>li:hover .ul-1{
	display: block;
}
.ul-1{
	background: #FFBECA;
}
.ul-1>li>a:hover{
	color:#FFFFFF;
	background:#FD0002 ;
}
.ul-1>li:hover .ul-2{
	display: block;
}
.ul-2{
	left:100px;
	background: #008001;
	top:0px;
}
.ul-2>li:hover a{
	background: #0102F3;
	color:#FFFFFF;
}
.ul-1>li:nth-of-type(2)>a:after{
	content:"";
	display: block;
	width:0;
	height: 0;
	border-left:5px solid #000000;
	border-top:5px solid rgba(250,250,250,0);
	border-bottom:5px solid rgba(250,250,250,0);
	position: absolute;
	top:20px;
	left:90px;
}
.ul-1>li:nth-of-type(2):hover>a:after{
	border-left:5px solid #FFFFFF;
}
	</style>
	</head>
	<body>
		<nav>
			<ul >
				<li><a href="">导航栏</a></li>
				<li><a href="">导航栏</a>
				<ul class="ul-1">
					<li><a href="">一级菜单</a></li>
					<li><a href="">一级菜单</a>
					<ul class="ul-2">
						<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></li>
					<li><a href="">一级菜单</a></li>
					<li><a href="">一级菜单</a></li>
					<li><a href="">一级菜单</a></li>
				</ul></li>
				<li><a href="">导航栏</a></li>
				<li><a href="">导航栏</a></li>
				<li><a href="">导航栏</a></li>
			</ul>
		</nav>
	</body>
</html>
效果图
在这里插入图片描述 ```
制作这个导航最主要的也就是使用绝对定位使下级菜单脱离文档流使其可以不打乱上一级菜单布局
简单实现二级菜单

这里写自定义目录标题

猜你喜欢
