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 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也能写出下拉菜单