<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>
怎樣用css寫出一個下拉菜單
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。