应用场景
这可以说是一个导航的减法变幻吧。
像一些中英文网上，当鼠标在菜单上的时候把菜单上的中文改变成英文。
知识点
负边距运用。
技巧
如果要实现鼠标在菜单上时把首页显示成Home，一般有两种写法：
方法一，写两个并列的标签。
当鼠标在 li 时显示有英文文字 首页 的标签。因为他们都是在同一个种元素 a 标签上，所以可能需要给两个 a 标签添加类名来识别，而且还需要添加再次 href 属性值。
<li>
<a href="#">首页</a>
<a href="#">Home</a>
</li>
方法二，使用嵌套。(推荐)
像这种写法因为 a 标签和 span 本就不同，所有可以直接用他们来区分。而且 span 是嵌套在 a 标签中的，所以只需要写一个 href 值。
<li>
<li><a href="#">首页<span>Home</span></a></li>
</li>
完整代码
<!--
Author: XiaoWen
Create a file: 2017-02-27 17:21:07
Last modified: 2017-02-27 17:50:05
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.top-nav{
font-size:12px;
font-weight: bold;
list-style:none;
border-bottom: 8px solid #dc4e1b;
overflow: auto;
}
.top-nav li{
float: left;
margin-right: 1px;
}
.top-nav li a{
line-height: 20px;
text-decoration: none;
background: #ddd;
color: #666;
display: block;
80px;
text-align: center;
}
.top-nav li a span{
display: none;
}
/* 鼠标移动时的事件 */
.top-nav li a:hover span{
display: block;
background: #f00;
color: #fff;
}
.top-nav li a:hover {
margin-top: -20px;
}
</style>
</head>
<body>
<ul class="top-nav">
<li><a href="#">首页<span>Home</span></a></li>
<li><a href="#">课程大厅<span>Course</span></a></li>
<li><a href="#">学习中心<span>Learn</span></a></li>
<li><a href="#">关于我们<span>About</span></a></li>
</ul>
</body>
</html>
总结
巧妙的运用了负边距，把 a 标签上移自身高度，而让下面的 span 标签显示在自身原来的位置。