码迷,mamicode.com
首页 > Web开发 > 详细

用css写出下拉框(代码转自wq群)

时间:2017-10-28 12:46:36      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:rgb   网易   问题   :hover   主页   会员   右上角   back   显示   

做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框。

<style>
/* css*/
#body{
float: left;
}
#xialakuang{
background-color:#f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/*设置下拉框的阴影*/
display: none;
}
#body a{
display: block;
padding:10px 15px;
color: #C4C4C4;
line-height: 20px;
font-size: 12px;
}
#body a:link{
text-decoration: none;
background-color: black;
}
#body a:hover{
background-color:#3E3D3D;
color: white;
}33 .anniu{
background-color: black;
width: 108px;
height: 40px;
color: white;
border: none;
cursor: pointer;
}
#body:hover #xialakuang{
display: block; /*鼠标放在div上时使下拉框显示,放在这里的目的是在鼠标往下拉框移动时下拉框不会消失*/
}
#body:hover .anniu{
background-color:#3E3D3D;
}
</style>
<body>
<div id="body">
<button class="anniu">移动下拉(css)</button>
<div id="xialakuang">
<a href="">我的主页</a>
<a href="">我的消息</a>
<a href="">我的等级</a>
<a href="">会员中心</a>
<a href="">个人设置</a>
<a href="">退出</a>
</div>
</div>
</body>

用css写出下拉框(代码转自wq群)

标签:rgb   网易   问题   :hover   主页   会员   右上角   back   显示   

原文地址:http://www.cnblogs.com/Heng23/p/7746075.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!