您现在的位置是：首页 > Css > 正文

Css

css实现中英文双语导航菜单

happyfhb2009-02-23Css1364

双语菜单一般在中英双版的企业站会经常用到，而绝大部分都是用图片来实现，这里和大家分享用纯CSS实现的中英双语导航菜单！代码请看：

<html>    <head>    <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312"  />    <title>css实现中英文双语导航菜单</title>    <style>    *{margin:0;padding:0;}    body{margin:50px;font:12px Microsoft YaHei;}    #topnav{height:30px;}    ul{height:25px;border-bottom:5px maroon solid;overflow:hidden;}    ul li{float:left;margin:0 1px 0 0;list-style:none;}    ul li a{display:block;width:80px;height:25px;line-height:25px;text-align:center;background:#CCC;text-decoration:none;position:relative;}    ul li a span{visibility:hidden;position:absolute;top:0;left:0;width:80px;height:25px;text-align:center;background:maroon;color:#FFF;cursor:pointer;}    ul li a:hover{border:0;}    ul li a:hover span{visibility:visible;}    </style>    </head>    <body>    <div id="topnav">    <ul>    <li><a href="http://www.html-css.cn/" _fcksavedurl="http://www.html-css.cn/">IE6.0<span>微软IE6</span></a></li>    <li><a href="http://www.html-css.cn/" _fcksavedurl="http://www.html-css.cn/">IE7.0<span>微软IE7</span></a></li>    <li><a href="http://www.html-css.cn/" _fcksavedurl="http://www.html-css.cn/">Firefox<span>火狐</span></a></li>    <li><a href="http://www.html-css.cn/" _fcksavedurl="http://www.html-css.cn/">Opera<span>Opera浏览器</span></a></li>    <li><a href="http://www.html-css.cn/" _fcksavedurl="http://www.html-css.cn/">Chrome<span>谷歌浏览器</span></a></li>    </ul>    </div>    </body>    </html>

原始出处:http://www.html-css.cn/css/53.html

感谢没有面包的猪的指导。