做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框。
<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群)
原文地址:http://www.cnblogs.com/Heng23/p/7746075.html