<!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>
</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;/*使得鼠標經過一級菜單時候二級菜單顯示*/
}
