完全用CSS实现的中英文双语导航菜单_电脑软硬件应用网_国内最受关注的计算机应用解决中心

首页·电脑学院·电脑故障·操作系统·硬件教程·局域网技术·QQ技巧·网络安全·办公软件· 数据库

导航·设计学院·图像处理·网页设计·软件教程·服务器技术·笔记本·专家装机·网络编程·在线问答

当前位置：电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文

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

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

2009-6-7 13:15:27　　文/佚名　　出处:学习在线　　

这是一个完全用CSS实现的中英文双语导航菜单，无脚本和图片，初始时，菜单语言是英文，当鼠标悬停在菜单上时，其变成中文，当然你也可以反过来做。

实现原理：
XHTML
<ul id="nav">
<li><a class="bi" href="index.html">Home<span>首　页</span></a></li>
</ul>

从上面代码可以看出，中文放在 span 标签里，关键是需要在初始时，使其的属性不可见。

CSS
.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;
}

链接的属性是相对定位，那在此标签里的元素可将其作为参照点。在 span 元素里的中文因其设定了不可见，所以在初始状态时，只能显示英文。而当鼠标悬停在菜单上时，

span 元素里的设定变为可见，Z轴为99 ，覆盖在英文上面，从而实现了语言文字的转换。缺点：因为中英文字的长度关系，不能实现自适应宽度，只能固定宽度。

<!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;}<</p><div align='left'><b><div id=pages style='float:left;border:1px solid #39f;text-align:center;WIDTH: 30px;HEIGHT: 20px;background-color:#eee;padding:2px;margin:5px;margin-right:0;'><font color='red'>1</font></div><div id=pages style='float:left;border:1px solid #39f;text-align:center;WIDTH: 30px;HEIGHT: 20px;background-color:#eee;padding:2px;margin:5px;margin-right:0;' ><a href='http://www.xue5.com/itedu/200710/26824_2.html'>2</a></div><div id=nextpage style='float:left;border:1px solid #39f;text-align:center;WIDTH: 55px;HEIGHT: 20px;background-color:#eee;padding:2px;margin:5px;'><a href='http://www.xue5.com/itedu/200710/26824_2.html'>下一页</a></div> </b></div></DIV><DIV class="mycontent3"><script language='javascript' src='/AD/200504/</p></div><p align="center"><b><font color="red">[1]</font> <a href="info-36262_2.html">[2]</a> <a href="info-36262_2.html">下一页</a></b></p> <div id="art_content_end_468x60"> <a href='http://www.3648.com/article/sort0318/list318_1.html'><font color=red size=4><b>视频教程</font></b></a> <script type="text/javascript" src="/adfile/news2.js"></script> <p style="color:#000000; font-size:12px; text-align:right; padding-right:4px;">[<script language="JavaScript" src="/article/Hits.Asp?ArticleID=36262"></script>]【责编:佚名】 </p> </div> </div> <div class="xg"> <li style="white-space:nowrap;text-overflow:ellipsis;overflow: hidden;">上一篇：文章：<a href="/article/sort09/sort046/info-36261.html">用CSS来控制网页背景</a> </li> <li style="white-space:nowrap;text-overflow:ellipsis;overflow: hidden;">下一篇：文章：<a href="/article/sort09/sort046/info-36263.html">网页（WEB）字体，CSS如何控制？</a> </li> </div> <div class=blank> </div> <div class=Fushu style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px"> <div class=F_lst style="FLOAT: left"> <div class=F_tle><IMG height=7 src="/images/f06.gif" width=9 border=0>热门文章 </div> <div style="MARGIN: 5px 10px; WIDTH: 90%">· <a class="showlistR" href="/article/sort09/sort046/info-12478.html" title="精通CSS滤镜（filter）（实例解析）">精通CSS滤镜（filter）（实例解析）</a><br> · <a class="showlistR" href="/article/sort09/sort046/info-13618.html" title="用CSS实现文字环绕图片的效果">用CSS实现文字环绕图片的效果</a><br> · <a class="showlistR" href="/article/sort09/sort046/info-11774.html" title="div+css实现类似圆角表格效果">div+css实现类似圆角表格效果</a><br> · <a class="showlistR" href="/article/sort09/sort046/info-13627.html" title="学习CSS布局心得">学习CSS布局心得</a><br> · <a class="showlistR" href="/article/sort09/sort046/info-13482.html" title="CSS制作很漂亮的文字滑动效果">CSS制作很漂亮的文字滑动效果</a><br> · <a class="showlistR" href="/article/sort09/sort046/info-29154.html" title="用CSS控制select边框及其他属性">用CSS控制select边框及其他属性</a><br> · <a class="showlistR" href="/article/sort09/sort046/info-13481.html" title="DIV的定位实例">DIV的定位实例</a><br> · <a class="showlistR" href="/article/sort09/sort046/info-11142.html" title="浅谈CSS网页布局DIV水平居中">浅谈CSS网页布局DIV水平居中</a><br> · <a class="showlistR" href="/article/sort09/sort046/info-13632.html" title="IE与Firefox的CSS兼容问题整理">IE与Firefox的CSS兼容问题整理</a><br> · <a class="showlistR" href="/article/sort09/sort046/info-29988.html" title="css控制div置顶置底的例子">css控制div置顶置底的例子</a><br> · <a class="showlistR" href="/article/sort09/sort046/info-31178.html" title="div+css实现Firefox和IE6兼容的垂直居中">div+css实现Firefox和IE6兼容的垂直居中</a><br> · <a class="showlistR" href="/article/sort09/sort046/info-35175.html" title="旋转变换文字(3D效果有点酷）">旋转变换文字(3D效果有点酷）</a><br> </div> </div> <div class=F_lst style="FLOAT: right"> <div class=F_tle><IMG height=7 src="/images/f06.gif" width=9 border=0>相关文章 </div> · <a href="/article/sort09/sort046/info-36262.html" title="完全用CSS实现的中英文双语导航菜单">完全用CSS实现的中英文双语导航菜单</a> <br> · <a href="/article/sort09/sort046/info-36236.html" title="CSS+DIV设计实例：纯CSS制作下拉导航菜单">CSS+DIV设计实例：纯CSS制作下拉导航菜单</a> <br> · <a href="/article/sort09/sort046/info-35942.html" title="兰色背景变换的CSS导航菜单">兰色背景变换的CSS导航菜单</a> <br> · <a href="/article/sort09/sort046/info-35925.html" title="CSS+DIV+JS导航菜单和Flash效果差不多">CSS+DIV+JS导航菜单和Flash效果差不多</a> <br> · <a href="/article/sort09/sort046/info-35918.html" title="符合标准的中英文双语导航菜单代码">符合标准的中英文双语导航菜单代码</a> <br> · <a href="/article/sort09/sort046/info-35897.html" title="鼠标指向有背景的CSS导航菜单">鼠标指向有背景的CSS导航菜单</a> <br> · <a href="/article/sort09/sort046/info-35893.html" title="CSS制作的导航菜单代码">CSS制作的导航菜单代码</a> <br> · <font color="#0066FF">[图文]</font><a href="/article/sort09/sort046/info-35846.html" title="仿蓝色理想网站的导航菜单">仿蓝色理想网站的导航菜单</a> <br> · <a href="/article/sort09/sort046/info-35833.html" title="网页特效：DIV CSS网页布局导航菜单源代码(20)">网页特效：DIV CSS网页布局导航菜单源代码(20</a> <br> · <a href="/article/sort09/sort046/info-35825.html" title="CSS制作的文字加框的导航菜单">CSS制作的文字加框的导航菜单</a> <br> · <a href="/article/sort09/sort046/info-35819.html" title="佳能（中国）网站用的导航菜单源代码">佳能（中国）网站用的导航菜单源代码</a> <br> · <font color="#0066FF">[图文]</font><a href="/article/sort09/sort046/info-35626.html" title="酷！旋转导航菜单,网页特效">酷！旋转导航菜单,网页特效</a> <br> </div> </div> <div class=blank> </div> <div class=blank> </div> <div class=Fushu> <div class="title_line2 font14"><IMG height=29 src="/images/f04.gif" width=7>文章评论 <a href="/article/comment.asp?ArticleID=36262">评论内容只代表网友观点，与本站立场无关！</a><input type="button" name="postBtn2" id="postBtn2" value="发表评论" onclick="showElement('postComment2')" /> </div> <div class="story" style="padding:3px;"></div> </div> <div class=blank> </div> <div class=Fushu><div class="mainstory" id="postComment2" style="display:none;"> <div class="postComment" style="padding:3px;"> <form name="myform" method="post" action="/article/comment.asp"> <input type="Hidden" name="ArticleID" value="36262" /> <input type="Hidden" name="action" value="save" /> <p>用户名：<input type="text" name="UserName" maxlength="15" size="28" /> <font color="#ff0000">！</font> <a href="/article/comment.asp?ArticleID=36262" target="_blank">查看更多评论</a></p> <p>分　值：<input type="radio" name="Grade" value="100" />100分 <input type="radio" name="Grade" value="85" checked="true" />85分 <input type="radio" name="Grade" value="70" />70分 <input type="radio" name="Grade" value="55" />55分 <input type="radio" name="Grade" value="40" />40分 <input type="radio" name="Grade" value="25" />25分 <input type="radio" name="Grade" value="10" />10分 <input type="radio" name="Grade" value="0" />0分</p> <p>内　容：<textarea name="content" cols="70" rows="5" title="请注意用语文明且合法，不要发布带有攻击性的言论，谢谢合作！">

上一篇文章： CSS+DIV网页重构对比TABLE显著优势

下一篇文章：用CSS来控制网页背景

最新热点		最新推荐		相关文章
				CSS伪类选择器nth-child() css3教程:background属性调整增强 css教程：CSS3 Media Queries 详解 CSS 类名的长命名和短命名 CSS实例教程:非浮动区域设置宽度如何使用css约束一个层不可见？ CSS的list-style解释小议使用“完整”的CSS的缺点 CSS中的相对定位与绝对定位详解实例使用DIV+CSS制作圆角边框加阴影…