完全用CSS实现的中英文双语导航菜单 - 狼客门

完全用CSS实现的中英文双语导航菜单 - [代码]

2008-12-04

Tag：代码网页设计 js css 菜单

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
 http://unnet.blogbus.com/logs/32145352.html

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。
这是一个完全用CSS实现的中英文双语导航菜单，无脚本和图片，初始时，菜单语言是英文，当鼠标悬停在菜单上时，其变成中文，当然你也可以反过来做,缺点：因为中英文字的长度关系，不能实现自适应宽度，只能固定宽度。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="bilingual menu,中英文双语菜单" /> <meta http-equiv="Description" content="完全用CSS实现的中英文双语导航菜单" /> <meta content="all" name="robots" /> <meta http-equiv="pragma" content="no-cache" /> <meta name="author" content="forestgan" /> <meta name="copyright" content="forestgan" /> <title>完全用CSS实现的中英文双语导航菜单</title> <style type="text/css"> a{ color: #FFFF99; text-decoration: none; } a:hover{ color: #FFFFFF; text-decoration: underline; } #nav{ padding: 10px 10px 0; font-size: 12px; font-weight: bold; margin: 1em 0 0; list-style:none; } #nav li{ float: left; margin-right: 1px; } .bi{ position: relative; z-index: 0; } .bi:hover{ z-index: 99; } .bi:hover span{ visibility: visible; top: 0; left: 0; cursor: pointer; } .bi span{ position: absolute; left: -999em; visibility: hidden; } #nav li a,.bi:hover span{ line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; } #nav li a:hover,.bi:hover span{ color: #FFFFFF; background: #DC4E1B; } .bi:hover span{ padding-top: 2px; } #navbar{ background: #DC4E1B; height: 8px; overflow: hidden; clear: both; } </style> </head> <body> <div id="top"> <ul id="nav"> <li><a class="bi" href="index.html">Home<span>首　页</span></a></li> <li><a class="bi" href="about.html">About us<span>关于我们</span></a></li> <li><a class="bi" href="products.html">Products<span>产品展示</span></a></li> <li><a class="bi" href="services.html">Services<span>售后服务</span></a></li> <li><a class="bi" href="contact.html">Contact<span>联系我们</span></a></li> </ul> <div id="navbar"></div> </div> <noscript>google-analytics</noscript> <noscript>stat.</noscript> </body> </html>
Via:lanrentuku

历史上的今天：
抓色小猫-绿色屏幕抓取软件 2008-12-04
RGB色彩对照表 2008-12-04
中国传统色彩名录 2008-12-04
超漂亮的仿MAC的CSS菜单 2008-12-04
snazzy border menus 上下TAB菜单 2008-12-04

随机文章：
snazzy border menus 上下TAB菜单 2008-12-04
cssplay实用css代码精选-靠边的隐藏菜单（网页设计js,css代码特效） 2008-12-02
中国传统色彩名录 2008-12-04
超漂亮的仿MAC的CSS菜单 2008-12-04
鼠标移过放大的JS动态菜单 2008-12-04

收藏到：Del.icio.us

引用地址：

发表于22:48:28 | 编辑 | 继续话题 | 转发 | 分享　0

<< 鼠标移过放大的JS动态菜单 | 首页 | snazzy border menus 上下TAB菜单 >>

狼客门

完全用CSS实现的中英文双语导航菜单 - [代码]

2008-12-04

历史上的今天：

随机文章：

目录

最近更新

狼 客 门

完全用CSS实现的中英文双语导航菜单 - [代码]

2008-12-04

历史上的今天：

随机文章：

目录

最近更新

狼客门