中英文切换导航制作

<div class="topNav">
<ul>
<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>
</div>

*{
padding:0;
margin:0;
}
ul{
width:500px;
height:40px;
margin:0 auto;
border-bottom: 8px solid #DC4E1B;
overflow: auto;//包裹子元素
}
ul li{
float: left;
list-style: none;

background-color: #eee;
margin-right:2px;
}
ul li a{
line-height: 40px;
text-align: center;
font-size: 20px;
color: #000;
text-decoration: none;
display: block;
padding:0 10px;
}
ul li a:hover{
color: #fff;
margin-top:-40px;
background-color: #DC4E1B;
}
ul li a span{
display:none;

}
ul li a:hover span{
display:block;

}