码迷,mamicode.com
首页 > 其他好文 > 详细

下拉菜单 方法实例

时间:2017-10-28 12:50:54      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:width   html   pointer   text   charset   文档   移动   会员中心   href   

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<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;
}
.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>
</head>

<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>

</html>

下拉菜单 方法实例

标签:width   html   pointer   text   charset   文档   移动   会员中心   href   

原文地址:http://www.cnblogs.com/wangyufei123/p/7746181.html

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