中琅软件教程网

首页搜索登录
首页业界网页平面多媒体程序数据库办公工具服务器系统网络安全站长认证壁纸
加入收藏 | 网站地图 | | RSS | WAP
你好,游客 登录 注册 搜索

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

[日期:2009-11-22] 作者: 来源:cnblogs [字体: ]
<!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: bold 12px Arial, Helvetica, sans-serif,"宋体";
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: #DDD;
color: #666;
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: #FFF;
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>

关键词:菜单  导航  英文 

收藏 推荐 打印 | 录入:blue1000 | 阅读:
本文评论   查看全部评论 (2)
表情: 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事/刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
第 2 楼
* 匿名 发表于 2016/12/25 16:00:09
http://www.blue1000.com/bkhtml/c117/2010-06/68091.htm 无法抹去的记忆作文 http://www.135995.com/details/zs3150.html 以勇气为话题的作文 http://www.135995.com/details/zs3149.html
第 1 楼
* 匿名 发表于 2016/12/24 15:47:51
http://www.blue1000.com/bkhtml/c117/2010-06/68091.htm 运动会拉拉队口号 http://www.135995.com/show/18411.html 销售口号霸气押韵 http://www.135995.com/show/18410.html