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

article/2025/8/23 9:45:44

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>