原理：在一個列表的列表項中嵌入另一個（第二級）列表
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul li{
float: left;
list-style: none;
}
.secNav li{
float: none;
}
ul.secNav{
display: none;
}
.secNav a{
background: #B5B5B3;
}
ul li:hover .secNav {
display: block;
}
ul li a{
display: block;
width: 6em;
height:3em;
line-height: 3em;
text-align: center;
color:#F4F2F2;
border-left: 1px solid #c8c8c8;
background:#564E4E;
text-decoration: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首頁</a></li>
<li>
<a href="#">新聞</a>
<ul class="secNav">
<li><a href="#">時事新聞</a></li>
<li><a href="#">當地新聞</a></li>
<li><a href="#">世界新聞</a></li>
</ul>
</li>
<li><a href="#">動態</a></li>
<li><a href="#">幫助</a></li>
</div>
</body>
</html>
解釋及注意事項：
1.注意嵌套，可以爲二級ul添加一個類2.設置margin和padding爲0才能讓第二級菜單與第一級菜單自動對齊
<pre name="code" class="html"> *{
margin: 0;
padding: 0;
}<pre name="code" class="html"> .secNav li{
float: none;
}
<pre name="code" class="html">ul.secNav{
display: none;
}<pre name="code" class="html">ul li:hover .secNav {
display: block;
}