css变换菜单
这是一个简单的导航变换菜单，当鼠标放上去的时候中文变成英文，有两种实现方式，直接看代码。
<!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 red;
overflow:hidden;
}
.top-nav li{
float: left;
margin-right: 1px;
}
.top-nav li a{
line-height: 30px;
text-decoration: none;
background: #ddd;
color: #666;
display: block;
width:80px;
text-align: center;
}
.top-nav li a span{
display: none;
}
.top-nav li a:hover span{
display: block;
background: red;
color: white;
}
.top-nav li a:hover{
margin-top: -30px;
}
</style>
</head>
<body>
<ul class="top-nav">
<li><a href="">向往<span>xiang</span></a></li>
<li><a href="">周杰伦<span>jielun</span></a></li>
<li><a href="">陈奕迅<span>eason</span></a></li>
<li><a href="">王珞丹<span>wang</span></a></li>
</ul>
</body>
</html>
这种做法将a标签里面的span隐藏起来，当hover a标签的时候将span元素变成block,另外hover a的时候将a标签设
margin-top: -30px;此时a标签只是设置了行高30px，没有设置高，设置高就会出问题。
在看另一种比较简单的方法:
<!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 red;
overflow: auto;
}
.top-nav li{
float: left;
margin-right: 1px;
}
.top-nav li a{
height: 30px;
line-height: 30px;
text-decoration: none;
background: #ddd;
color: #666;
display: block;
width:80px;
text-align: center;
}
.top-nav li a span:last-child{
display: none;
}
.top-nav li a:hover span:first-child{
display: none;
}
.top-nav li a:hover span:last-child{
display: block;
background: red;
color: white;
}
/* .top-nav li a:hover{
margin-top: -30px;
}
*/
</style>
</head>
<body>
<ul class="top-nav">
<li><a href=""><span>向往</span><span>xiang</span></a></li>
<li><a href=""><span>周杰伦</span><span>jielun</span></a></li>
<li><a href=""><span>陈奕迅</span><span>eason</span></a></li>
<li><a href=""><span>王珞丹</span><span>wang</span></a></li>
</ul>
</body>
</html>
这种方法就是讲a标签里面的中文和英文都用a包含起来，有first-child隐藏起来，当hover a标签的时候将a标签里面的第一个span隐藏起来，将第二个span设置block，。
这主要用到了first-child和last-child伪类，和块状和行内元素的转换和hover的使用。
还是看看我吧。
