实现鼠标悬浮中英文切换横向导航菜单
分类：实例代码
鼠标悬浮中英文切换横向导航菜单属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它实现了横向导航菜单。
当鼠标悬浮，可以实现中英文切换效果，更多导航菜单效果可以参阅:
（1）.导航菜单特效分类。
（2）.下拉菜单特效分类。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.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: 25px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
.top-nav li a span {
display: none;
}
.top-nav li a:hover span {
display: block;
}
.top-nav li a:hover {
margin-top: -25px;
background-color: #DC4E1B;
color: #FFF;
}
</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>
鼠标悬浮中英文切换横向导航菜单，这样的场景在实际项目中还是用的比较多的，关于鼠标悬浮中英文切换横向导航菜单就介绍到这了。