js实现导航栏中英文切换效果
思路：
ul的高度为li的一半，ul{overflow:hidden}
li:hover{margin-top:-40px;}
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>中英切换导航条</title>
<styletype="text/css">
*{padding:0;margin:0;}
li{list-style:none;}
a{text-decoration:none;}
.nav{width:100%;height:40px;background:#222;margin-top:100px;overflow:hidden;}
.list{width:1000px;height:40px;margin:0auto;}
.listli{float:left;}
.listlia{display:block;transition:0.3s;}
.listb,.listi{display:block;padding:030px;color:#aaa;line-height:40px;text-align:center;}
.listb{font-weight:100}
.listi{font-style:normal;background:#333;color:#fff;}
.lista:hover{margin-top:-40px;}
</style>
</head>
<body>
<divclass="nav">
<ulclass="list">
<li>
<ahref="#">
<b>Index</b>
<i>首页</i>
</a>
</li>
<li>
<ahref="#">
<b>course</b>
<i>职业课程</i>
</a>
</li>
<li>
<ahref="#">
<b>study</b>
<i>就业学习</i>
</a>
</li>
<li>
<ahref="#">
<b>BBS</b>
<i>社区</i>
</a>
</li>
<li>
<ahref="#">
<b>JiKe+</b>
<i>发现+</i>
</a>
</li>
</ul>
</div>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！