使用ul li标签构建导航栏，在li中设置两个并列标签<a>和<span>，分别装有中文和英文，利用css:hover伪类设置显示隐藏。
代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>中英文切换导航栏</title> <style type="text/css"> *{margin:0px;padding:0;} ul{overflow: hidden;} li{ width:120px; height:30px; float:left; list-style:none; margin-left:1px; text-align:center; background:#dfdfdf; line-height:30px; color:#4e4e4e; } a{ display:none; background:#df4e19; text-decoration:none; color:#eefff0; } li:hover>a{display:block;} li:hover>span{display:none;} </style> </head> <body> <ul> <li><a href="#">首页</a><span>Home</span></li> <li><a href="#">博客</a><span>Blog</span></li> <li><a href="#">作品</a><span>guestbook</span></li> <li><a href="#">挑选</a><span>Pickbar</span></li> <li><a href="#">粉丝</a><span>fansir</span></li> </ul> </body> </html>