Css實現一個菜單導航
阿新 • • 發佈：2017-08-29
名稱 標簽 idt abs 子div doc hit 字體 lan 
提要:使用大div定位設置為relative,子div設置為absolute實現菜單下拉
實現代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Nav</title> 6 <style type="text/css"> 7 /*給導航設置一個背景#333*/ 8 .nav{ 9 background-colorView Code: #333; 10 } 11 /*給導航裏的a標簽設置樣式*/ 12 .nav a{ 13 /*設置大小*/ 14 padding:16px 20px; 15 /*去掉下劃線*/ 16 text-decoration: none; 17 /*字體顏色*/ 18 color: white; 19 /*設置內聯塊級元素*/ 20 display: inline-block; 21 }22 /*設置鼠標劃過的背景色*/ 23 .nav a:hover{ 24 background: #111; 25 } 26 /*給下拉框設置定位*/ 27 .dropdown{ 28 position: relative; 29 display: inline-block; 30 } 31 /*下拉內容設置定位*/ 32 .dropdown-content{ 33 display:none; 34 position: absolute; 35 /*設置一個似倒影的卡片樣式*/ 36 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3); 37 } 38 /*將下拉內容框裏的a標簽設置塊級元素和字體顏色*/ 39 .dropdown-content a{ 40 display: block; 41 min-width:110px; 42 color:#000; 43 padding: 10px 0; 44 text-align: center; 45 } 46 /*設置下拉內容框裏的a標簽背景*/ 47 .dropdown-content a:hover{ 48 background: #f1f1f1; 49 border:none; 50 } 51 /*當下拉按扭劃過時，則下拉內容顯示*/ 52 .dropdown:hover .dropdown-content{ 53 display: block; 54 } 55 56 </style> 57 </head> 58 <body> 59 <!--先設置一個大的div--> 60 <div class="nav"> 61 <!--設置元素，用標簽--> 62 <a href="#">主頁</a> 63 <a href="#">新聞</a> 64 <!--設置下拉框的div--> 65 <div class="dropdown"> 66 <!--設置下拉框的按扭名稱--> 67 <a href="#">國家列表</a> 68 <!--設置下拉框的內容--> 69 <div class="dropdown-content"> 70 <a href="#">中國</a> 71 <a href="#">美國</a> 72 <a href="#">日本</a> 73 </div> 74 </div> 75 <div class="dropdown"> 76 <!--設置下拉框的按扭名稱--> 77 <a href="#">武器列表</a> 78 <!--設置下拉框的內容--> 79 <div class="dropdown-content"> 80 <a href="#">核彈</a> 81 <a href="#">飛機</a> 82 <a href="#">大炮</a> 83 </div> 84 </div> 85 </div> 86 </body> 87 </html>
Css實現一個菜單導航