首页 > 网页特效 > 导航菜单 > 可兼容FireFox的中英文双语CSS导航菜单

可兼容FireFox的中英文双语CSS导航菜单

时间：2010-02-20 来源：5icool.org

完全兼容FireFox的中英文双语CSS导航菜单，类似交换图像的效果，英文菜单在鼠标移近时自动翻转为中文菜单，代码简洁实用。

<!doctype 1.0="" dtd="" html="" public="" xhtml="">
	<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<meta content="text/html; charset=GB2312" http-equiv="Content-Type" />
			<title></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="http://www.5icool.org">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>
		</body>
	</html>
	</!doctype>

提示:可以对代码修改后再运行。

相关热词：双语导航 CSS菜单

分享到：

更多...

收藏至我的帐号

下载排行榜: 31款简单实用的CSS+JS下拉菜单脚本; 带标题和数字导航的JS焦点幻灯特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 唯美华丽带缩略小图的滑动式JQuery幻灯片特...; 14款很漂亮的jQuery导航菜单插件; 3D立体效果金字塔环形旋转的flash+xml相册代码; 带标题显示的宽屏jQuery焦点幻灯片代码

教程排行榜: 21个可用于网站和博客的免费视频播放器插件; 10个WEB开发者应该收藏的实用工具网站推荐; 20款国外知名的PHP开源免费CMS系统推荐; 10款有利于加速WEB开发的必备CSS开发框架; 国外十五款优秀的免费开源电子商务平台; 新浪SAE新手教程：如何下载和安装DiscuzX2.0？; 微博数据分析：新浪微博企业微博发布时间规...; 12款跨浏览器的网页兼容性测试工具推荐; 国外五款主流的免费网站流量统计工具; 巧用QQ漂流瓶做网站营销推广