主要是用CSS的span标签来实现，其实看了代码你会觉得，原来实现双语菜单如此简单。

CSS Code 复制内容到剪贴板 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.jb51.net/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns= "https://www.jb51.net/1999/xhtml" >    <head>    <title>CSS实现的中英文双语菜单</title>    <style type= "text/css" >    ul {      list-style-type :  none ;    }    li {      float :  left ;      display :  block ;      width :  100px ;    }    a {      font-size :  9pt ;      font-weight :  bold ;      color :  #006699 ;      text-decoration :  none ;      line-height :  12px ;      width :  100px ;      display :  block ;      vertical-align :  middle ;    }    a:hover {      line-height :  12px ;      color :  #FF9900 ;      text-decoration :  none ;    }    #enFont {      font-size :  10px ;      color :  #999999 ;      width :  100px ;      font-family :  Verdana ,  Arial ,  Helvetica ,  sans-serif ;      line-height :  10px ;    float : left ;    }    span{ margin : 0px ; padding : 0px ;}    </style>    </head>    <body>    <ul>     <li><a href= "/" >网站主页</a><span id= "enFont" >HOME</span></li>     <li><a href= "/" >最新更新</a><span id= "enFont" >NEW</span></li>     <li><a href= "/" >下载排行</a><span id= "enFont" >TOP</span></li>     <li><a href= "/" >网站服务</a><span id= "enFont" >SERVICE</span></li>     <li><a href= "/" >用户留言</a><span id= "enFont" >GUESTBOOK</span></li>     <li><a href= "/" >联系我们</a><span id= "enFont" >CONTACT</span></li>    </ul>    </body>    </html>