<!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>

js效果之导航中英文转换的更多相关文章

  1. 碰撞缓冲效果的导航条 js

  2. m.jd.com首页中的js效果

    m.jd.com中的部分js效果 昨天把m.jd.com的首页布局写好了,今天写一下首页中部分js效果.头部背景色透明度的改变,焦点图轮播,京东快报的小轮播,以及秒杀倒计时.这里html,css样式就 ...

  3. JS实现悬浮导航的制作--web前端

    思想:导航在这里只有两种状态,一种是初始状态.一种是固定布局状态.实现悬浮导航其实就是通过Javascript脚本语言控制导航的两种状态,主要是对两种状态成立条件的判断,明确了这些,实现起来就不会太难 ...

  4. JS实现悬浮导航的制作（附源码）--web前端

    思想:导航在这里只有两种状态,一种是初始状态.一种是固定布局状态.实现悬浮导航其实就是通过Javascript脚本语言控制导航的两种状态,主要是对两种状态成立条件的判断,明确了这些,实现起来就不会太难 ...

  5. 类js效果

    类似js效果,点击看看  代码 onclick="return confirm('您确定要看看吗?')" 放入a标签里面

  6. Android 抽屉效果的导航菜单实现

    Android 抽屉效果的导航菜单实现 抽屉效果的导航菜单 看了很多应用,觉得这种侧滑的抽屉效果的菜单很好. 不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面上一个按钮点击,菜单就滑出来,而 ...

  7. js中实现字母大小写转换

    js中实现字母大小写转换主要用到了四个js函数: 1.toLocaleUpperCase  2.toUpperCase3.toLocaleLowerCase4.toLowerCase 下面就这四个实现 ...

  8. Tab选项卡切换卡JS效果

    <script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid ...

  9. JS效果的步骤

    一.写JS效果的步骤 1.先实现布局 (XHTML+CSS2) 2.实现原理 (1)希望把某个元素移除你的视线: a.  display:none;         显示为无,不占据空间 b.  vi ...

随机推荐

  1. c#中 abstract 和 virtual 的区别与用法

    先来看abstract方法,顾名思义,abstract方法就是抽象方法. 1.抽象方法就是没有实现的,必须是形如:  public abstract void Init();   2.拥有抽象方法的类 ...

  2. jQuery $.ajax跨域-JSONP获取JSON数据（转载）

    Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...

  3. CF1038D Slime 构造

    题目大意: 有nnn只史莱姆qwq,每只史莱姆有一个分数,每次一只史莱姆可以吞掉左边的或者右边的史莱姆(要是有的话),然后ta的分数会减去被吞的史莱姆的分数,问最后剩下的史莱姆分数最大为多少 输入格式 ...

  4. IOS - CoreData 增删改查

    #pragma mark - Core Data Methods - (void)insertObjectWithFileName:(NSString *)fileName { /** SQL新增记录 ...

  5. Java web课程学习之Request和Response

    request和response l HttpServletRequest l 请求转发 l HttpServletResponse l 请求重定向   请求流程 每次请求service(),都会由容 ...

  6. [中文] 以太坊（Ethereum ）白皮书

    以太坊(Ethereum ):下一代智能合约和去中心化应用平台 翻译|巨蟹 .少平 译者注|中文读者可以到以太坊爱好者社区(www.ethfans.org)获取最新的以太坊信息. 当中本聪在2009年 ...

  7. UNIX系统高级编程——第四章-文件和目录-总结

    文件系统: 以UNIX系统V文件系统为例: 磁盘分为区,每个分区都有自己的文件系统: ​ i节点是固定长度的记录项,包含了文件的相关信息.目录项包含文件名和i节点号.stat结构中除文件名和i节点编号 ...

  8. CSS的引入方式和样式

    CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...

  9. 《一个民企CEO的职场阳谋》–读书总结（上）

    职场是一个战场,很多人几十年在这里战斗. 职场是一个熔炉,很多人大半生在这里修炼. 如果在办公室里得不到快乐,生活就不会快乐. 如果公司里头感觉不到幸福,人生就不会幸福.(以上四句来自老刘的博客) & ...

  10. java开发必背API

    1.java.io.file类,File用于管理文件或目录: 所属套件:java.io File file = new File(fileStringPath); 1)file.mk(),真的会创建一 ...