主要是用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-typenone;    }    li {     floatleft;     displayblock;     width100px;    }    a {     font-size9pt;     font-weightbold;     color#006699;     text-decorationnone;     line-height12px;     width100px;     displayblock;     vertical-alignmiddle;    }    a:hover {     line-height12px;     color#FF9900;     text-decorationnone;    }    #enFont{     font-size10px;     color#999999;     width100px;     font-familyVerdanaArialHelveticasans-serif;     line-height10px;    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>  

利用CSS span实现双语菜单的方法教程