<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!--<link href="test3.css" rel="stylesheet" type="text/css"/>-->
<style type="text/css">
* {
margin: 0px;
padding: 0px
}
section {
background: #444;
color: #E9E9E9
}
a {
text-decoration: none;
color: #55e5e5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
nav {
width: 400px;
height: 60px;
margin: 0 auto;
color: #999999;
}
ul, li {
list-style-type: none
}
nav>ul >li {
float: left;
position: relative;
}
nav>ul >li >a {
display: block;
padding: 20px 0px;
width: 80px;
text-align: center;
border-right: 1px solid #e9e9e9;
}
.subnav {
display: none;
}
nav>ul>li:hover {
background: #12aeef;
}
nav>ul>li:hover .subnav {
display: block;
position: absolute;
margin-top: 1px
}
.subnav a {
display: block;
background-color: #12aeef;
color: #FFFFFF;
border-bottom: 1px solid #f2f2f2;
width: 100px;
text-align: center;
}
.subnav a:hover {
background: #6dc7ec;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a>
<ul class="subnav">
<li><a href="#">Home1</a></li>
<li><a href="#">Home2</a></li>
<li><a href="#">Home3</a></li>
</ul>
</li>
<li><a href="#">About Me</a>
<ul class="subnav">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</header>
<section>
<article>
<div> Nav test </div>
</article>
</section>
</body>
</html>
原文：http://www.cnblogs.com/whytohow/p/4796069.html