您的位置：首页 > Web前端 > CSS

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

2018-03-03 00:00 471 查看
摘要: 模仿悬浮显示隐藏二级菜单与小三角制作

<!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 "在这里输入图片标题")
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css
相关文章推荐
新的分享
章节导航