<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>
相关文章：