用css写出下拉框(代码转自wq群)
做网易云音乐首页时遇到的问题,鼠标指在右上角头像时出现下拉框。
<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>
最新文章
- mac tomcat https
- SQLite in Windows Store Apps
- 邻接矩阵无向图(一)之 C语言详解
- HDU 1495 	非常可乐
- 25套用于Web UI设计的免费PSD网页元素模板
- NeatUpload 同时选择并上传多个文件
- 使用SignalR实现比特币价格实时刷新
- Linq to SQL 类型的对象图包含循环,如果禁用引用跟踪,择无法对其进行序列化。
- struts2 s:if 的字符串比较问题
- Sql SUBSTR函数
- 第一百零六节,JavaScript变量作用域及内存
- 【Python爬虫实战--1】深入理解urllib;urllib2;requests
- thymeleaf 专题
- .Net Core 爬坑日记
- 数据库if判断语句
- checkbox选中事件的正确写法
- poj1873(枚举+凸包)
- 在CAD二次开发中使用状态条按钮
- 转:vue2.0 keep-alive最佳实践
- Hive 简介