css3编写导航栏

最新推荐文章于 2022-10-01 15:45:13 发布

csq2804106929

最新推荐文章于 2022-10-01 15:45:13 发布

阅读量558

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/csq2804106929/article/details/49885233

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
	*{margin: 0;padding:0;}
	nav>ul>li>a{color: #ccc;text-decoration: none;}
	nav>ul{
			width: 80%;
			height: 50px;
			background: -webkit-linear-gradient(top,#292929,#252525);
			margin: 0 auto;
			list-style: none;
			border-radius:6px ;
			min-width:800px;/*使浏览器显示宽度缩小到设定宽度,字体不再聚拢挤出*/
			/*overflow: hidden;*/
		}
	nav>ul{display: -webkit-box;margin-top: 100px;}/*弹性盒子布局,给父亲指定box*/
	nav>ul>li{
				-webkit-box-flex:1;/*平均分成一等分*/
				text-align: center;
				line-height: 50px;
				position: relative;
			}
	.downlist{
		list-style: none;
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		-webkit-perspective:400px;
		
	}
	.downlist>li>a{
		text-decoration: none;
		color: #ccc;
		
	}
	.downlist>li{
		background: -webkit-linear-gradient(top,#292929,#252525);
		display:none;
		-webkit-transform:rotateY(90deg);
		-webkit-transition:opacity .4s,transform .5s;
	}
	.downlist li:nth-child(1){
		-webkit-transition-delay:250ms;
	}
	.downlist li:nth-child(2){
		-webkit-transition-delay:200ms;
	}
	.downlist li:nth-child(3){
		-webkit-transition-delay:150ms;
	}
	.downlist li:nth-child(4){
		-webkit-transition-delay:100ms;
	}
	.downlist li:nth-child(5){
		-webkit-transition-delay:50ms;
	}
	.downlist li:nth-child(6){
		-webkit-transition-delay:0ms;
	}
	nav li:hover{
		background: -webkit-linear-gradient(top,#1c1c1c,#1b1b1b);
		border-radius:6px ;
	}
	nav li:hover .downlist li{
		display:block;
		-webkit-transform:rotateY(0deg);
	}
	nav li:hover .downlist li:nth-child(1){
		-webkit-transition-delay:0ms;
	}	
	nav li:hover .downlist li:nth-child(2){
		-webkit-transition-delay:50ms;
	}	
	nav li:hover .downlist li:nth-child(3){
		-webkit-transition-delay:100ms;
	}	
	nav li:hover .downlist li:nth-child(4){
		-webkit-transition-delay:150ms;
	}	
	nav li:hover .downlist li:nth-child(5){
		-webkit-transition-delay:200ms;
	}
	nav li:hover .downlist li:nth-child(6){
		-webkit-transition-delay:250ms;
	}		
</style>
</head>
<body>
	<nav>
		<ul>
			<li><a href="#">csqcsqcsqcsq</a></li>
			<li>
				<a href="#">csqcsqcsqcsq</a>
				<ul class="downlist">
					<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>
			</li>
			<li>
				<a href="#">csqcsqcsqcsq</a>
				<ul class="downlist">
					<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>
			</li>
			<li><a href="#">csqcsqcsqcsq</a></li>
			<li><a href="#">csqcsqcsqcsq</a></li>
			<li><a href="#">csqcsqcsqcsq</a></li>
		</ul>
	</nav>
</body> 
</html>

csq2804106929

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3编写导航栏

Document *{margin: 0;padding:0;} nav>ul>li>a{color: #ccc;text-decoration: none;} nav>ul{ width: 80%; height: 50px; background: -webkit-linear-gradient(top,#292929,#252525); margin: 0 a
复制链接

扫一扫

专栏目录