原理：在一个列表的列表项中嵌入另一个（第二级）列表
代码：
<!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;
}