<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航翻转效果</title>
<style>
*{
padding:0;
margin:0;
list-style:none;
text-decoration:none;
}
.nav{
width:100%;
height:40px;
background:#333;
margin-top:50px;
}
.nav_con{
width:1000px;
height:40px;
margin:0 auto;
overflow:hidden;
}
.nav_con li{
float:left;
}
.nav_con li a{
display:block;
height:80px;
color:#ccc;
margin-top:0;
transition:all 0.5s;
}
.nav_con li a:hover{
margin-top:-40px;
}
.nav_con li a span.ac{
background:#FFF;
color:#333;
border-top:1px solid #333;
}
.nav_con li a span{
padding:0 35px;
display:block;
height:40px;
line-height:40px;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav_con">
<ul>
<li><a href="#"><span>home</span><span class="ac">首页</span></a></li>
<li><a href="#"><span>home</span><span class="ac">首页</span></a></li>
<li><a href="#"><span>home</span><span class="ac">首页</span></a></li>
<li><a href="#"><span>home</span><span class="ac">首页</span></a></li>
<li><a href="#"><span>home</span><span class="ac">首页</span></a></li>
<li><a href="#"><span>home</span><span class="ac">首页</span></a></li>
</ul>
</div>
</div>
</body>
</html>
与其放在电脑里占内存，还不如拿出来帮助一群小白白之html篇之八
原文：http://www.cnblogs.com/mikou2017/p/6883418.html