一个用css写出来的下拉菜单

时间 2019-11-11
原文原文链接
 1 <style>
 2 /*    css*/
 3     #body{
 4         float: left;
 5     }
 6     #xialakuang{
 7         background-color:#f9f9f9;
 8         box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);/*设置下拉框的阴影*/
 9         display: none;
10     }
11     #body a{
12         display: block;
13         padding:10px 15px;
14         color: #C4C4C4;
15         line-height: 20px;
16         font-size: 12px;
17     }
18     #body a:link{
19         text-decoration: none;
20         background-color: black;
21     }    
22     #body a:hover{
23         background-color:#3E3D3D;
24         color: white;
25     }33     .anniu{
34         background-color: black;
35         width: 108px;
36         height: 40px;
37         color: white;
38         border: none;
39         cursor: pointer;
40     }
41     #body:hover #xialakuang{
42         display: block;     /*鼠标放在div上时使下拉框显示，放在这里的目的是在鼠标往下拉框移动时下拉框不会消失*/
43     }
44     #body:hover .anniu{
45         background-color:#3E3D3D;
46     }
47 </style>
48 <body>
49     <div id="body">
50         <button class="anniu">移动下拉(css)</button>
51         <div id="xialakuang">
52             <a href="">个人主页</a>
53             <a href="">个人消息</a>
54             <a href="">个人等级</a>
55             <a href="">会员中心</a>
56             <a href="">我的设置</a>
57             <a href="">退出</a>
58         </div>
59     </div>
60 </body>