相关文章
网页设计使用DIV+CSS制作网页后，表格Table还有用吗？
北京网页设计HTML 5新增的元素
北京网页设计USB设备的危险 浅谈防止数据泄漏三策略
网站设计参数设置
企通互联访搜狐FLASH幻灯新闻,无需修改任何程序
企通互联第六节 插入文本
北京网页设计第四节 页面整体属性
北京网页设计FLASH MX 2004视频教程:《电脑报》片头制作（七)
企通互联文本工具栏的使用(上)
网站建设Windows桌面风格页面制作点滴(2)
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 企通互联北京网站制作中英文双语导航菜单
企通互联北京网站制作中英文双语导航菜单
作者的blog ：http://www.planabc.net/
老甘的《完全用CSS实现的中英文双语导航菜单》一文中使用“position: absolute;left: -999em;”将其左缩进N远，并通过“visibility: hidden;”将其物理隐藏（实际是占位的），此时显示英文导航。当hover触发时，z-index定义在上，并将其绝对定位位置设置为左上，设置visibility: visible;显示，此时span层覆盖在a层上，显示中文。
我们还可以还一种思维使用hover触发display属性实现：
CSS代码修改如下：
#nav li a,#nav li a:hover span {网站制作
line-height: 20px;北京网页设计
text-decoration: none;企通互联
background: #DDDDDD; www.qt-net.com网页设计
color: #666666; 北京网站建设网站建设
display: block;北京网页设计
width: 80px;网页设计
text-align: center;北京网页设计
overflow:hidden;北京网站建设
}
#nav li a span {北京网站制作
display:none;网站建设
}
#nav a:hover {网站制作
position: relative;网页设计
}
#nav a:hover span {网站设计
display:block;网站制作
position:absolute;网页设计
top: 0;网站设计
left: 0;企通互联
cursor: pointer;北京网站设计
}
#nav a:hover span {北京网站制作
padding-top:2px;网站建设
}
#nav li a:hover,#nav li a:hover span {网页设计
color: #FFFFFF;网站建设
background: #DC4E1B;北京网站设计
}
北京网站制作
代码框网站制作 企通互联
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">网站制作
<html xmlns="http://www.w3.org/1999/xhtml">北京网站建设
<head>企通互联
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />企通互联
<title>中英文双语导航菜单</title>网站制作
<style type="text/css">网站建设
* {margin:0;padding:0;} 北京网页设计
#nav{网站建设
padding: 10px 10px 0;网站设计
font-size: 12px;网站制作
font-weight: bold;北京网站制作
font-family:Arial, Helvetica, sans-serif,宋体;网站设计
margin: 1em 0 0;北京网站制作
list-style:none;北京网站建设
}
#nav li{网站制作
float: left;北京网站制作
margin-right: 1px;北京网页设计
}
#nav li a,#nav li a:hover span{北京网站建设
line-height: 20px;北京网站建设
text-decoration: none;北京网站制作
background: #DDDDDD;网站设计
color: #666666;网站建设
display: block;北京网页设计
width: 80px;企通互联
text-align: center;网站设计
overflow:hidden;北京网站建设
}
#nav li a span{display:none;}
#nav a:hover{网页设计
position: relative;网站制作
}
#nav a:hover span{北京网站设计
display:block; 北京网站制作网站制作
position:absolute; 北京网页设计网站设计
top: 0;北京网站建设
left: 0; 网站设计企通互联
cursor: pointer;网站设计
}
#nav a:hover span{网站设计
padding-top:2px;网站设计
}
#nav li a:hover,#nav li a:hover span{企通互联
color: #FFFFFF;网站制作
background: #DC4E1B;北京网站建设
}
#navbar{网站建设
background: #DC4E1B;网站建设
height: 8px;北京网页设计
overflow: hidden;北京网站制作
clear: both;北京网站设计 网站制作
}
</style>网站建设
</head>
<body>北京网站制作
<ul id="nav">北京网站制作
<li><a href="index.html">Home<span>首 页</span></a></li> 网站建设北京网站设计
<li><a href="about.html">About us<span>关于我们</span></a></li>网站设计
<li><a href="products.html">Products<span>产品展示</span></a></li>网页设计
<li><a href="services.html">Services<span>售后服务</span></a></li>网站设计
<li><a href="contact.html">Contact<span>联系我们</span></a></li>网站建设
</ul>网站制作
<div id="navbar"></div>北京网站设计
</body>网站制作
</html>
上一篇：北京网站设计IE中伪类:hover的使用及BUG
下一篇：北京网站制作在线编HTML辑器(兼容IE和Firefox)