<!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=gb2312" />
<title>TT</title>
<style>
body {
text-align: center;
background: #FFF;
font: 12px Tahoma, sans-serif;
color: #000;
}
img {
border: 0;
}
ul,li {
list-style:none;
}
* {
margin: 0;
padding: 0;
}
.clear {
clear: both;
margin: 0 auto;
display: block;
font: 0/0 sans-serif;
height: 3px;
}
.head {
margin: 0 auto;
width: 100%;
}
.header_zzjs {
width: 100%;
float: right;
padding: 20px 0 0 0;
background-color:blue;
}
.headt {
padding-top: 20px;
font-size: 14px;
}
.head li {
display: inline;
}
.head li a {
background: #E9F2FF;
border: 1px solid #CCC;
padding: 12px 60px;
}
.head li a:hover {
background: #B3D3FF;
text-decoration: none;
color: #D30102;
}
</style>
</head>
<body>
<script type="text/javascript">
function fetch_object(idname)
{
var my_obj = document.getElementById(idname);
return my_obj;
}
function toggle_nav(obj)
{
for (i = 1; i<= 3; i++ )
{
var sub_nav = fetch_object("zzjs_nav" + i);
var sub_nav_index = fetch_object("zzjs_nav0");
sub_nav_index.style.display = "none";
if (obj == i)
{
sub_nav.style.display = "block";
}
else
{
sub_nav.style.display = "none";
}
}
}
</script>
<div class="head">
<div class="header_zzjs">
<ul>
<li onmouseover="javascript:toggle_nav(1)"><a href="#">站长一号</a></li>
<li onmouseover="javascript:toggle_nav(2)"><a href="#">站长二号</a></li>
<li onmouseover="javascript:toggle_nav(3)"><a href="#">站长三号</a></li>
</ul>
<div class="clear"></div>
<div id="zzjs_nav0" class="headt" style="display:block"></div>
<div id="zzjs_nav1" class="headt" style="display:none">
<a href="#">站长特效首页</a> | <a href="#">首页一号</a> | <a href="#">首页二号</a> | <a href="#">首页三号</a>
</div>
<div id="zzjs_nav2" class="headt" style="display:none">
<a href="#">站长特效一号</a> | <a href="#">一号菜单栏目1</a> | <a href="#">一号菜单栏目2</a> | <a href="#">一号菜单栏目3</a>
</div>
<div id="zzjs_nav3" class="headt" style="display:none">
<a href="#">站长特效二号</a> | <a href="#">二号菜单栏目1</a> | <a href="#">二号菜单栏目2</a>
</div>
<div id="zzjs_nav4" class="headt" style="display:none">
<a href="#">站长特效三号</a> | <a href="#">三号菜单栏目1</a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</body>
</html>
相关推荐
js完善的二级菜单,通过js实现的二级折叠菜单.更加的方便,用着很舒服
CSS3水平二级导航菜单，纯CSS3制作，红色风格，鼠标经过显示二级菜单。
水平导航菜单，当鼠标移动上去，会显示每个菜单下的二级菜单效果。 采用Html+JavaScript
jquery蓝色圆角横向二级导航菜单代码
<!... ; charset=gb2312" /> 代码,菜单导航,JS广告...此代码内容为巧克力jQuery横向二级滑动导航菜单，属于站长常用代码，更多菜单导航代码请访问懒人图库JS代码频道。" /> 巧克力jQuery横向二级滑动导航菜单_懒人图库 ...
用js,css做的两个网站导航栏，学习菜单制作和css的很好实例，比之前传的资源（只有一级菜单）多了二级菜单，一个是二级水平，一个是二级竖直，相信对你的学习有帮助。谢谢关注。
内容索引:脚本资源,CSS特效,菜单 超级经典的支持二级分类的网站横向导航菜单，CSS+JavaScript联手打造，很多网站都在用。 因为用到了不少的图片资源，因此这里将其一并打包供下载。功能演示可以看上边的截图，...
响应式网站二级导航菜单是一款基于jquery.cbFlyout.js和jquery1.10.2.min.js制作的网站导航菜单，响应式设计，自适应屏幕分辨率大小，兼容PC端和手机移动端，页面正常显示时，网页顶部显示水平二级导航菜单，缩小...
本文主要介绍了js实现二级导航功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧
水平下拉式导航菜单，无限级菜单，可以无限级自定义，一级菜单，二级，三级
从国外收费网站翻译过来的一款多种二级下拉菜单导航样式，二级导航菜单支持多种自定义内容，例如：图片列表，登陆注册信息，二级下拉导航条等等
绿色风格的二级导航菜单，基于jquery技术，水平横向排列，适合大部分网站使用，最多支持二级的菜单。当你把鼠标迅速滑过主菜单的时候，二级菜单动画闪过，形成菜单各项渐显的漂亮效果，很不错哦。
蓝色水平二级导航菜单，DIV+CSS布局，应用到jQuery技术，蓝色风格，清爽大气。 该网页菜单包含文件：html,css,js,gif图片
纯CSS3宽屏水平导航下拉菜单代码，一款好看实用的横向网站导航下拉二级菜单，一级菜单还带有小图标，鼠标悬停则下拉显示全部二级菜单项目。
之前分享了很多纯css的导航菜单，今天介绍一款基于jquery和css3的响应式二级导航菜单，这款导航是传统的基于顶部，鼠标经过的时候显示二级导航，还采用了当前流行的响应式设计。需要的朋友可以参考下
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果。分享给大家供大家参考。具体如下： 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单，相信你会喜欢的，蓝色，超级经典的一种风格，从其它网站上扣下来...
响应式网站二级导航菜单是一款基于jquery.cbFlyout.js和jquery1.10.2.min.js制作的网站导航菜单，响应式设计，自适 应屏幕分辨率大小，兼容PC端和手机移动端，页面正常显示时，网页顶部显示水平二级导航菜单，缩小...
内容索引:脚本资源,jQuery,动感菜单,水平导航菜单 jQuery 带动态效果的两级横向导航菜单，全部是由jquery+CSS代码完成，菜单很简洁，使用背景色平铺而成，因此没有使用GIF等图像资源，这个菜单可以两级展开，当把...