一個用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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。