html+css實現下拉菜單
阿新 • • 發佈：2017-08-15
eight lock 二級 charset type 菜單顯示 位置 去除 relative
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="blog%20css.css" type="text/css"/> <title>二級菜單</title> </head> <body> <div id="nav"> <ul> <li><a href="#">首 頁</a> </li> <li><a href="#">新隨筆</a> <ul> <li><a href="#">二級菜單二級菜單</a></li> <li><a href="#">二級菜單</a></li> <li><a href="#">二級菜單</a></li> </ul> </li> <li><a href="#">留 言</a> <ul> <li><a href="#">二級菜單二級菜單</a></li> <li><a href="#">二級菜單</a></li> <li><a href="#">二級菜單</a></li> </ul> </li> </ul> </div> </div> </body> </html>
*{ margin:0; padding:0;
} /*可以去除瀏覽器默認的樣式*/ #nav{ background-color:#eeeeee; width: 600px; margin:0 auto;/*導航條橫向居中*/ height: 40px; } ul{ list-style: none; } ul li{ float: left; text-align: center;/*導航條文字垂直居中*/ line-height: 40px; position: relative;/*相對定位使得二級菜單在對應的一級菜單下顯示*/ } a{ text-decoration: none; color:black; display: block;/*配合padding使用，讓a塊狀占滿整個li*/ padding:0 10px; } a:hover{ background-color:black; color:#fff; } ul li ul li{ float: none;/*取消二級菜單的浮動，使其恢復豎向顯示*/ background-color:#eeeeee; margin-top: 1px; white-space: nowrap;/*強制二級菜單長度超過父級時候不換行，如果是英文或者數字則不需要*/ } ul li ul{ position: absolute;/*以瀏覽器為（0,0）位置進行定位,且不會因為二級菜單過長而撐開一級菜單*/ left:0; top: 40px; display: none;/*使得初始時候二級菜單隱藏*/ } ul li:hover ul{ display: block;/*使得鼠標經過一級菜單時候二級菜單顯示*/ }
html+css實現下拉菜單