css实现二级菜单

最新推荐文章于 2022-10-20 16:07:26 发布

峨M峰

最新推荐文章于 2022-10-20 16:07:26 发布

阅读量186

点赞数 1

分类专栏： css小技巧文章标签： css3 html animation

本文链接：https://blog.csdn.net/weixin_46719229/article/details/119538125

版权

css小技巧专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css实现二级菜单

代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		li {
			list-style-type: none;
		}
		/* 设置a标签样式 */
		li a{
			text-decoration: none;
			color: whitesmoke;
			font-weight: 600px;
			font-size: 18px;
		}
		/* 一级菜单 */
		.nav{
			display: flex;
			align-items: center;
			width: 40%;
			height: 50px;
			margin: 100px auto;
			border-radius: 5px;
			background-color: orange;
		}
		/* 一级菜单项样式 */
		.nav li{
			flex: 1;
			height: 40px;
			margin: 6px 10px;
			border-radius: 8px;
			line-height: 40px;
			text-align: center;
		}
		.nav li:hover{
			background-color: #710b02;
		}
		/* 一级菜单项a标签动画效果 */
		.nav > li > a:hover::after{
			content: '';
			display: block;
			height: 2px;
			margin: 0 auto;
			margin-top: -5px;
			background-color: #F5F5F5;
			animation: widthChange 1s linear  infinite alternate;
		}
		@keyframes widthChange{
			from{
				width: 0%;
				}
			to{
				width: 60%;
			}
		}
		/* 二级菜单显示*/
		.nav li:hover ul{
			display: block;
		}
		/* 二级菜单居中显示 */
		.nav li ul{
			position: relative;
			width: 40px;
			left: 50%;
			top: -10px; /* 二级菜单与li间有空隙,鼠标移入消失,使元素上移,消除影响 */
			padding-top:20px ;
			transform: translateX(-50%);
			display: none;
		}
		/* 二级菜单项样式 */
		.nav li ul li {
			width: 40px;
			height: 40px;
			margin: 10px 0;
			line-height: 40px;
			border-radius: 10px;
			background-color: #710b02;
			text-align: center;
			cursor: pointer;
		}
		/* 二级菜单旋转效果 */
		.nav li ul li:hover{
			transform: rotate(360deg);
			border-radius: 20px;
			transition: all 1s linear;
		}
	</style>
	<title></title>
</head>
<body>
		<!-- 一级菜单 -->
		<ul class="nav">
			<li><a href="">Home</a></li>
			<li><a href="">About</a></li>
			<li >
				<a href="">Product</a>
				<!-- 二级菜单 -->
				<ul>
					<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="" >Contact</a></li>
		</ul>
</body>
</html>

效果图

在这里插入图片描述

峨M峰

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css实现二级菜单

css实现二级菜单代码<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style type=
复制链接

扫一扫