<!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. jsp指令和学习笔记集锦

    Jsp包含三个编译指令和七个动作指令.三个编译指令为:page.include.taglib. 七个动作指令为:jsp:forward.jsp:param.jsp:include.jsp:plugin ...

  2. css样式表格边框1px hover时为2px 实现方式

    //css .flclass-cont .flclass-cont-box{width:%;display:inline-block;font-size:;margin:10px;position:r ...

  3. Windows下绿色版Tomcat部署Thingworx 7.4

    绿色版Tomcat部署Thingworx7.4和安装只有一个不同之处,安装版Tomcat需要在Configure Tomcat的Java标签下设置Java Options,但是绿色版并没有这个exe程 ...

  4. php--方便好用的函数

    在写代码的时候经常会遇见各种各样的问题,感觉需要写函数解决,其实php中已经给出指定函数了.这些函数就需要我们日常去了解记忆. 1.获取指点年份中某月的天数 cal_days_in_month() & ...

  5. 将数据内容动态添加到HTML中

    // 申明一个数组用来装遍历的元素 var li = []; //遍历元素并加载到标签中 for(var i = 0; i<navGroup.self_first_nav.length; i++ ...

  6. CF859C Pie Rules 动态规划 逆推_思维题

    题意:有 nnn 个物品,每个物品有不同的价值,物品按顺序分给两个人,有一块令牌,每回合拥有令牌的人拥有物品的分配权,但是该回合未获得物品的那个人会在下回合获得令牌,开始令牌在Bob手里,两个人都采取 ...

  7. CSS布局总结（一）

    前言:今天是学校为期六周的实训第一天,实训课感觉很水,第一天讲的竟然是HTML...实训老师丢了一个静态页面给我们做.感觉很久没写过这种东西,突然觉得自己的基本功很渣.布局这方面感觉需要总结一下,然后 ...

  8. 【bzoj 1502】月下柠檬树

    月下柠檬树 题意 求n个圆与他们的公切线的定积分. 解法 求出圆的公切线就可以了. 特别坑的一点 : 最两端的圆,有可能会被其他的圆所包含,所以要重新求一下最左端与最右端. 比较坑的一点 : 精度要设 ...

  9. 题解 P1337 【[JSOI2004]平衡点 / 吊打XXX】

    这道题调了好久,果然非洲人是得不到眷顾的吗... 本题采用模拟退火解决. 模拟退火是一种简洁明了而又高效的近似算法,基本上可以套到任何求最优解的题目上去. 它的原理是模拟物理中金属退火的现象,凭借选手 ...

  10. dubbo 部分 配置的关系-dubbo github 官方案例

    1.dubbo 有一个 dubbo.properties 作为默认配置 默认配置可以在不添加新的配置的前提下使用dubbo dubbo.properties 的内容(来自 https://github ...