html二级菜单显示与隐藏,悬浮显示隐藏二级菜单与小三角制作

Document

.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; }

理财

• 定期活期

• 基金投资

```html

结果：