<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.pop-menu-inner { width: 150px; }
.pop-menu-inner .pop-title { width: 150px; text-align: center; color: #212121; font-size: 18px; cursor: pointer;}
.pop-menu-inner:hover .pop-menu { display: block; }
.pop-menu-inner .pop-menu { display: none; position: relative; width: 150px;border: 1px solid #E5E5E5; margin: 0; padding: 10px 0px; background-color: #fff; border-radius: 2px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.15); box-shadow: 0 5px 10px rgba(0,0,0,0.15); }
/*两个小三角(一个背景色是边框的背景色,一个是#fff)*/
.pop-menu-inner .pop-menu:before { display: block;content: "◆";font-size: 14px;position: absolute;left: 72px;top: -11px;color: #E5E5E5; }
.pop-menu-inner .pop-menu:after { display: block;content: "◆";font-size: 14px;position: absolute;left: 72px;top: -10px;color: #fff; }
.pop-menu-inner .pop-menu li { display: block; padding: 0px !important; }
.pop-menu-inner .pop-menu li a { display: block;font-size: 16px;color: #434343;text-align: center;height: 40px;line-height: 40px; text-decoration: none; }
.pop-menu-inner .pop-menu li:hover a { color:#E84519; background-color: #F3F3F3; }
</style>
</head>
<body>
<div class="pop-menu-inner" id="pop-menu-inner">
<p class="pop-title" id="pop-title">理财</p>
<ul class="pop-menu" id="pop-menu">
<li>
<a href="/app/dqHqChannel">定期活期</a>
</li>
<li>
<a href="/app/fundsChannel">基金投资</a>
</li>
</ul>
</div>
</body>
</html>
```html
结果:
![输入图片说明](https://static.oschina.net/uploads/img/201803/03163115_1miE.gif "在这里输入图片标题")
转载于:https://my.oschina.net/shuaihong/blog/1628373