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>
欢迎大家阅读,本人见识有限,写的博客难免有错误或者疏忽的地方,还望各位指点,在此表示感激不尽。文章持续更新中…