一個用css寫出來的下拉菜單
阿新 • • 發佈：2017-10-28
會員 col href splay hover style 個人 陰影 oat
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寫出來的下拉菜單