HTML+CSS实现简单的二级菜单

沐小侠

已于 2023-05-22 09:43:06 修改

阅读量3k

点赞数 6

分类专栏： HTML+CSS+JS

于 2022-10-20 16:07:26 首次发布

本文链接：https://blog.csdn.net/weixin_41092938/article/details/127429095

版权

HTML CSS 二级菜单悬停效果网页制作

关键词由CSDN通过智能技术生成

HTML+CSS+JS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

HTML+CSS实现简单的二级菜单，效果如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>二级菜单</title>
		<style>
			body,ul,li,a,img{
				margin: 0;
				padding: 0;
			}
			ul,li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			.my{
				position: relative;
				width:50px;
				margin: 10px auto;
			}
			.img{
				width: 50px;
				height: 50px;
				border-radius: 100%;
			}
			.my-menu{
				position: absolute;
				top: 70px;
				display: none;
			}
			/* 三角形 */
			.menu-triangle{
				width: 0;
				height: 0;
				border: 20px solid transparent;
				border-bottom: 20px solid orange;
				position: absolute;
				left: 15px;
				top: -42px;
			}
			.menu-info{
				width: 120px;
				height: 120px;
				padding:10px 20px;
				background-color: orange;
				border-radius: 10px;
				position: absolute;
				left: -20px;
				top: -2px;
			}
			.menu-info>ul>li{
				line-height: 1.8em;
			}
			.menu-info>ul>li>a{
				color: #fff;
			}
			.menu-info>ul>li:hover>a{
				color: #f00;
			}
			.my:hover>.my-menu{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="my">
			<img src="img/1.jpg" class="img"/>
			<div class="my-menu">
				<div class="menu-triangle"></div>
				<div class="menu-info">
					<ul>
						<li><a href="#">个人中心</a></li>
						<li><a href="#">内容管理</a></li>
						<li><a href="#">我的订单</a></li>
						<li><a href="#">退出</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>