带英文提示的CSS网站导航栏
看着很舒服的一款纯CSS菜单，中英文双语版，鼠标放上后提示英文菜单，提示的英文菜单是由一幅图片构成，CSS控制取不同的部分区域，因此你若使用这款菜单，你需要修改图片变为你自己的菜单内容。本CSS菜单导航整体效果很不错，清新美观，适用于大部分网站使用。
当前位置：编程学习 > JS >>
答案：<!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>
<title>带英文提示的CSS网站导航栏</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
@charset "gb2312";
/* www.zzzyk.com */
body{
margin:0;
padding:0;
font-size:12px;
}
*
{
margin:0;
padding:0;
text-align:left;
color:#0066cc;
font-family:"宋体",Tahoma, Verdana;
}
a{
color:#9196A0;
}
a:link {
text-decoration: none
}
a:visited{
text-decoration: none
}
a:hover{
text-decoration:underline;
color:#81BC06
}
#nav{
height:100%;
overflow: hidden;
list-style:none;
margin:0 auto;
width:798px
}
#nav li{
float:left;
font-weight:bold;
height:60px;
background:url(/jscss/demoimg/200907/navbg.png) #fff repeat-x left bottom;
padding:0
}
#nav a{
text-align:center;
padding-top:20px;
display: block;
height:40px;
line-height:40px;
}
#nav li a.one{width:80px;}
#nav li a.two{width:80px;}
#nav li a.three{width:80px;}
#nav li a.four{width:80px;}
#nav li a.five{width:100px;}
#nav li a.six{width:106px;}
#nav li a.seven{width:100px;}
#nav li a.eight{width:80px;}
#nav li a.nine{width:92px;}
#nav li a:hover.one{background:url(/jscss/demoimg/200907/navunbg.gif) no-repeat -8px 0}
#nav li a:hover.two{background:url(/jscss/demoimg/200907/navunbg.gif) no-repeat -8px -60px}
#nav li a:hover.three{background:url(/jscss/demoimg/200907/navunbg.gif) no-repeat -8px -120px}
#nav li a:hover.four{background:url(/jscss/demoimg/200907/navunbg.gif) no-repeat -8px -180px}
#nav li a:hover.five{background:url(/jscss/demoimg/200907/navunbg.gif) no-repeat 4px -240px}
#nav li a:hover.six{background:url(/jscss/demoimg/200907/navunbg.gif) no-repeat 8px -300px}
#nav li a:hover.seven{background:url(/jscss/demoimg/200907/navunbg.gif) no-repeat 4px -360px}
#nav li a:hover.eight{background:url(/jscss/demoimg/200907/navunbg.gif) no-repeat -8px -420px}
#nav li a:hover.nine{background:url(/jscss/demoimg/200907/navunbg.gif) no-repeat 0 -480px}
</style>
</head>
<body>
<p> </p>
<ul id="nav">
<li><a href="#" class="one">站长资源库</a></li>
<li><a href="#" class="two">关于我们</a></li>
<li><a href="#" class="three">行业资讯</a></li>
<li><a href="#" class="four">产品服务</a></li>
<li><a href="#" class="five">服务专区</a></li>
<li><a href="#" class="six">经典案例</a></li>
<li><a href="#" class="seven">网站帮助</a></li>
<li><a href="#" class="eight">意见反馈</a></li>
<li><a href="#" class="nine">联系我们</a></li>
</ul><!--nav end-->上一个：CSS竖直菜单，好棒！
下一个：向上滑动的蓝色大气导航菜单
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js把图片转换成 base64代码
- js把base代码转换成图片
- JS 将 base64编码的图片转化为图片文件
- js中的定时器
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。