演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
/* 以下是整个导航列表宽度和高度 */
.ul1{width: 502px;height: 52px;border: 1px solid #000000;
margin: 100px auto;text-align: center;
}
/* 以下是一级导航宽高,外边距1px,左浮动横向排列,定位参考点 */
.li1{width: 98px;height: 50px;line-height: 50px;
margin: 0 1px;float: left;background-color: #ccc;position: relative;}
/* 以下一级导航中div文字撑满一个一级导航 */
.li1 div{width: 98px;height: 50px;background-color: #ccc;}
/* 以下是二级导航列表定位,距离上方52px,左边0,默认不显示 */
.ul2{position: absolute;top: 52px;left: 0;display: none;}
/* 以下是二级导航中文字宽高,撑满一个二级导航 */
.li2{width: 98px;height: 50px;background-color: #ccc;border-bottom: 1px solid #000;}
/* 鼠标移入一级导航,显示二级导航 */
.li1:hover .ul2{
display: block;
}
</style>
</head>
<body>
<nav>
<!-- ul.ul1>li.li1{一级导航$}*5 -->
<ul class="ul1">
<li class="li1">
<div>一级导航1</div>
<!-- ul.ul2>li.li1{二级导航$}*5 -->
<ul class="ul2">
<li class="li2">二级导航1</li>
<li class="li2">二级导航2</li>
<li class="li2">二级导航3</li>
<li class="li2">二级导航4</li>
<li class="li2">二级导航5</li>
</ul>
</li>
<li class="li1">
<div>一级导航2</div>
<!-- ul.ul2>li.li1{二级导航$}*5 -->
<ul class="ul2">
<li class="li2">二级导航1</li>
<li class="li2">二级导航2</li>
<li class="li2">二级导航3</li>
<li class="li2">二级导航4</li>
<li class="li2">二级导航5</li>
</ul>
</li>
<li class="li1">
<div>一级导航3</div>
<!-- ul.ul2>li.li1{二级导航$}*5 -->
<ul class="ul2">
<li class="li2">二级导航1</li>
<li class="li2">二级导航2</li>
<li class="li2">二级导航3</li>
<li class="li2">二级导航4</li>
<li class="li2">二级导航5</li>
</ul>
</li>
<li class="li1">
<div>一级导航4</div>
<!-- ul.ul2>li.li1{二级导航$}*5 -->
<ul class="ul2">
<li class="li2">二级导航1</li>
<li class="li2">二级导航2</li>
<li class="li2">二级导航3</li>
<li class="li2">二级导航4</li>
<li class="li2">二级导航5</li>
</ul>
</li>
<li class="li1">
<div>一级导航5</div>
<!-- ul.ul2>li.li1{二级导航$}*5 -->
<ul class="ul2">
<li class="li2">二级导航1</li>
<li class="li2">二级导航2</li>
<li class="li2">二级导航3</li>
<li class="li2">二级导航4</li>
<li class="li2">二级导航5</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
