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>也是没想到css也能写出下拉菜单
一个用css写出来的下拉菜单
原文地址：http://www.cnblogs.com/wangqun1234/p/7745941.html