<!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. WCF（一）控制台寄宿

    WCF是微软开发的一款通信框架.具有跨平台跨操作系统的特点,所以,WCF一般用于开发第三方接口或者在分布式系统用做数据交互. WCF三要素分别是地址(Address).绑定(Binding).契约(C ...

  2. 大数据量.csv文件导入SQLServer数据库

    前几天拿到了一个400多M的.csv文件,在电脑上打开要好长时间,打开后里面的数据都是乱码.因此,做了一个先转码再导入数据库的程序.100多万条的数据转码+导入在本地电脑上花了4分钟,感觉效率还可以. ...

  3. UVa 11729 Commando War 【贪心】

    题意:有n个部下,交待每个部下完成他相应的任务需要bi的时间,然后完成这项任务需要ji的时间, 选择交待任务的顺序,使得总的花费的时间最少 因为不管怎么样,交待所需要的n*bi的时间都是要花费的, 然 ...

  4. ZBrush中关于标记的特殊情况

    在ZBrush®中使用Marker标记调控板来记忆物体属性,因此能在任何时间回到标记并使用它给其他物体或改变物体作为参考点,在使用Marker标记调控板时回出现很多特殊情况,本文小编就这些特殊情况做一 ...

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

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

  6. 开源Android容器化框架Atlas开发者指南

    Atlas是古希腊神话中的天神,是波士顿动力公司的机器人,借助搜索引擎,得以发现这个名词背后许许多多的含义.在手机淘宝,Atlas是一个扎根于Android客户端的一个组件化容器框架,相比神话中用手和 ...

  7. jupyter的安装

    3.6:\Lib\site-packages\pip\models\index.py # PyPI = Index('https://pypi.python.org/') # 替换成 PyPI = I ...

  8. pytorch实战（2）-----回归例子

    一.回归任务介绍: 拟合一个二元函数 y = x ^ 2. 二.步骤: 导入包 创建数据 构建网络 设置优化器和损失函数 前向和后向传播训练网络 画图 三.代码: 导入包: import torch ...

  9. HDU 5288 OO’s Sequence [数学]

     HDU 5288 OO’s Sequence http://acm.hdu.edu.cn/showproblem.php?pid=5288 OO has got a array A of size ...

  10. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...