jQuery三级下拉菜单

演示地址:http://www.corange.cn/demo/3738/index.html
http://www.corange.cn//uploadfiles/1202_52879.jpg

<!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>jQure三级下拉菜单</title>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.2.6");
</script>
<script type=text/javascript>
$(function(){
$('#webmenu li').hover(function(){
$(this).children('ul').stop(true,true).slideDown('slow');
},function(){
$(this).children('ul').stop(true,true).slideUp('slow');
});

$('#webmenu li').hover(function(){
$(this).children('div').stop(true,true).slideDown('slow');
},function(){
$(this).children('div').stop(true,true).slideUp('slow');
});
});
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-family:"宋体";
font-size:12px;
text-align:left;
}
img{ border:0px;}
a {
color:#333;
text-decoration:none;
}
ul {
list-style:none;
}
#webmenu { height:24px; text-align:center;}
#webmenu li ul {display:none; border:1px solid #ddd;}
#webmenu li ul li { float:none;}
*html #webmenu li ul li {display:inline;}
#webmenu li ul a {float:none; height:24px; line-height:24px; padding:0 10px; text-transform:capitalize;}
#webmenu .height-auto { line-height:15px; padding:5px 10px;}
.second-menu, .third-menu, .fourth-menu {position:absolute;}
.first-menu li {float:left; position:relative;}
.first-menu a { float:left; display:block; height:24px; line-height:24px; background:#e7e7e7; padding: 0;}
.first-menu a:hover {background:#ccc;}
.second-menu {top:24px; right:0;}
.second-menu a.arrow {background:#e7e7e7 url(image/li_bd.gif) no-repeat 160px 10px; border-bottom:1px solid #fff;}
.second-menu a.arrow:hover {background:#ccc url(image/nav_bd2.gif) no-repeat 160px 10px; color:#990000}
.second-menu a.arrow-02 {background:#e7e7e7 url(image/li_bd.gif) no-repeat 160px 10px; border-bottom:1px solid #fff;}
.second-menu a.arrow-02:hover {background:#ccc url(image/nav_bd2.gif) no-repeat 160px 10px; color:#990000}
.third-menu, .fourth-menu {width:177px; top:0; left:177px; _left:88px;}
.third-menu a {background:#e7e7e7; border-bottom:1px solid #fff;}
.third-menu a:hover {background:#ccc; border-bottom:1px solid #fff; color:#990000}
#subMgm {width:177px;}
#subMgm .third-menu {left:177px; _left:88px;}
#subMgm .fourth-menu {left:177px; _left:88px;}
#subMusic, #subNews {width:177px;}
</style>
</head>
<body οnlοad="MM_preloadImages('image/nav1_1.gif')">
<ul id="webmenu" class="first-menu">
<!--走进新天-->
<!--品牌产品-->
<li><a href="#" οnmοuseοut="MM_swapImgRestore()" οnmοuseοver="MM_swapImage('Image2','','image/nav1_2.gif',2)"><img src="image/nav_2.gif" alt="品牌产品" name="Image2" width="97" height="24" border="0" id="Image2" /></a>
<ul style="display: none;" id="subMusic" class="second-menu">
<li><a href="#" class="arrow" target="_self">产品展示</a></li>
</ul>
</li>
<li><a href="#" οnmοuseοut="MM_swapImgRestore()" οnmοuseοver="MM_swapImage('Image3','','image/nav1_3.gif',3)"><img src="image/nav_3.gif" alt="科技研发" name="Image3" width="97" height="24" border="0" id="Image3" /></a>
<ul id="subNews" class="second-menu">
<li><a href="#" class="arrow" target="_self">www.corange.cn</a>
<ul class="third-menu">
<li><a href="">百度</a></li>
<li><a href="">Google</a></li>

</ul>
</li>
<li><a href="#" class="arrow" target="_self">新闻</a>
<ul class="third-menu">
<li><a href="">新浪</a></li>
<li><a href="">腾讯</a></li>

</ul>
</li>
<li><a href="#" class="arrow" target="_self">招聘</a>
<ul class="third-menu">
<li><a href="">中华英才网</a></li>
<li><a href="">前程无忧</a></li>

</ul>
</li>
<li><a href="#" class="arrow" target="_self">网赚</a>
<ul class="third-menu">
<li><a href="">威客中国</a></li>
</ul>
</li>
<li><a href="#" class="arrow" target="_self">购物</a>
<ul class="third-menu">
<li><a href="#" class="arrow" target="_self">网站</a>
<ul class="fourth-menu">
<li><a href="">淘宝网</a></li>
<li><a href="">当当网</a></li>

</ul>
</li>
<li><a href="#" class="arrow" target="_self">快递公司</a>
<ul class="fourth-menu">
<li><a href="">申通快递</a></li>
<li><a href="">韵达快运</a></li>
</ul>
</li>
<li><a href="#" class="arrow" target="_self">电子支付</a>
<ul class="fourth-menu">
<li><a href="">支付宝</a></li>
<li><a href="">快钱</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="arrow" target="_self">科技</a>
<ul class="third-menu">
<li><a href="">专利之家</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" οnmοuseοut="MM_swapImgRestore()" οnmοuseοver="MM_swapImage('Image4','','image/nav1_4.gif',4)"><img src="image/nav_4.gif" alt="服务中心" name="Image4" width="97" height="24" border="0" id="Image4" /></a>
<ul style="display: none;" id="subMgm" class="second-menu">
<li><a href="#" class="arrow" target="_self">游戏</a>
<ul class="third-menu">
<li><a href="#" class="arrow" target="_self">网络游戏</a>
<ul class="fourth-menu">
<li><a href="/">魔兽世界</a></li>
<li><a href="">劲舞团</a></li>

</ul>
</li>
<li><a href="/">17173</a></li>
</ul>
</li>
<li><a href="#" class="arrow" target="_self">电影</a>
<ul class="third-menu">
<li><a href="/">迅雷看看</a></li>
<li><a href="">狗狗搜索</a></li>
</ul>
</li>
<li><a href="#" class="arrow" target="_self">视频</a>
<ul class="third-menu">
<li><a href="">优酷</a></li>
<li><a href="">土豆</a></li>

</ul>
</li>
<li><a href="#" class="arrow" target="_self">音乐</a>
<ul class="third-menu">
<li><a href="">百度-MP3</a></li>

</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
原文地址:http://www.corange.cn/archives/2010/12/3738.html

转载于:https://www.cnblogs.com/zerogo/archive/2010/12/03/1895292.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/263723.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux gcc march arch,Gcc的spec中arch什么的指定

gcc/gcc.c中的set_collect_gcc_options这里面有COLLECT_GCC_OPTIONS-marcharmv4t -mtunearm920t(gdb) p switches[0]$15 {part1 0x80792b1 "marcharmv4t", args 0x0, live_cond 1,validated 1 \001, ordering 0 \000}(gdb) p switches[1]$16 {part1 0x80792c…

php如何解决中文乱码问题?

为什么会出现中文乱码&#xff1f; 很多新手朋友学习PHP的时候&#xff0c;发现程序中的中文在输出的时候会出现乱码的问题&#xff0c;那么为什么会出现这种乱码的情况呢&#xff1f;一般来说&#xff0c;乱码的出现有2种原因&#xff0c;一种是由于编码(charset) 设置错误&am…

红帽将召开“开放你的世界”在线论坛

国外媒体报道&#xff0c;美国时间5月27日&#xff0c;红帽公司将召开在线开源论坛&#xff0c;主题为“开放你的世界”。时间为美国东部时间8:45-17:30.该论坛讨论的议题包括opensource.com网站所覆盖的健康医疗、教 育、政府、法律等领域。论坛嘉宾包括这些领域的开源思考者及…

Java提取文本文档中的所有网址(小案例介绍正则基础知识)

正则表达式基础以及Java中使用正则查找 定义&#xff1a; 正则表达式是一些用来匹配和处理文本的字符串 正则的基础&#xff08;先大致了解下&#xff09; 1. 正则表达式的作用 查找特定的信息&#xff08;搜索&#xff09;替换一些文本&#xff08;替换&#xff09;2. 正则基础…

Windows与Linux之间海量文件的传输与Linux下大小写敏感问题

Windows与Linux之间海量文件的传输与Linux下大小写敏感问题 mount.cifs 支持通过网络文件系统挂载&#xff0c;不过需要安装cifs-utils&#xff0c;也可通过mount -t cifs挂载&#xff0c;详细的选项可参见man mount.cifs 1. 通过Windows共享文件夹 1.1 设置windows共享1.2 Lin…

c语言如何读取mp3歌曲信息,VC中读取mp3文件信息的方法

标准格式的mp3文件中&#xff0c;都有一些自身描述的信息&#xff0c;比如歌曲名称、歌手、专辑名称等信息。这些信息都记录在mp3文件中&#xff0c;而且格式是固定的。那么&#xff0c;我们就可以用编程的方式来获取这些信息。其实说简单一点&#xff0c;就是VC文件读取的操作…

kvm虚拟机热迁移

1. 迁移介绍 迁移&#xff1a; 系统的迁移是指把源主机上的操作系统和应用程序移动到目的主机&#xff0c;并且能够在目的主机上正常运行。在没有虚拟机的时代&#xff0c;物理机之间的迁移依靠的是系统备份和恢复技术。在源主机上实时备份操作系统和应用程序的状态&#xff0c…

通过图表简化sql语句的表关联

在之前的博文中分享过一个执行了两天的一条sql语句&#xff0c;走了两个大表的扫描&#xff0c;导致执行时间很长&#xff0c;通过简化sql做了不小的改进&#xff0c;今天我们来看看还可以做些什么。 上次简化后的语句如下&#xff1a;with tmp_logical_date as (SELECT logica…

[翻译] BFKit

BFKit BFKit is a collection of useful classes to develop Apps faster. BFKit是一个有用的工具集合&#xff0c;帮助你快速开发。 Installing and Usage Pod Pod安装 Create a Podfile in your project directoryWrite:platform :ios, 7.0xcodeproj Project.xcodeproj pod …

Camera Vision - video surveillance on C#

http://www.codeproject.com/KB/audio-video/cameraviewer.aspx 开发的资源 介绍&#xff1a;纵观当今的监控系统的发展趋势&#xff0c;能很容易发现基于IP的解决方案正在迅速的普及。有许多的制造商&#xff0c;提供广泛的IP视频射像和视频服务器&#xff0c;意味着个人的IP…

11次作业

1、实验要求&#xff1a;建立一个通信录&#xff0c;通信录的结构体记录包括&#xff1a;姓名、生日、电话号码&#xff1b;其中生日又包括三项&#xff1a;年、月、日。编写程序&#xff0c;定义一个嵌套的结构类型&#xff0c;输入n&#xff08;n<10&#xff09;个联系人的…

android内存卡测试,安卓sd卡真假检测工具_内存卡检测扩容卡软件_sd insight

内存卡检测扩容卡软件内存卡检测扩容卡软件由于U盘、TF卡&#xff0c;sd内存卡等移动存储设备越来越便宜&#xff0c;导致很在某宝上买到便宜且容量大的U盘或者内存卡&#xff0c;结果基本上都是扩容盘&#xff0c;所谓扩容盘&#xff0c;就是实际容量比如2G的U盘&#xff0c;经…

Linux nohup和的功效

Linux nohup和&的功效 https://www.cnblogs.com/laoyeye/p/9346330.html 这是我转载的文章&#xff0c;写的很好&#xff0c; nohup Command [ Arg ... ] [ & ] &&#xff1a;进程后台执行 不挂断地运行命令。no hangup的缩写&#xff0c;意即“不挂断” 例如&…

MySql Workbench 安全模式(safe mode)

默认情况下&#xff0c;MySql WorkBench 的安全模式是打开的&#xff0c;即&#xff1a;update、delete语句必须带 where 条件字句&#xff0c;单条记录更新或删除。 如果关闭安全模式&#xff08;safe mode&#xff09;&#xff1a; 菜单栏&#xff1a;编辑(Edit) ---> 个…

13 个超炫的 Conky 配置

Conky 是一款桌面美化及系统信息监控软件&#xff0c;有着很强的自定义性&#xff0c;如果你熟悉的话可以配置出各类不同效果的界面&#xff0c;而下面列出了 13 个超炫的 Conkey 配置&#xff0c;你可以尝试其中之一。 Bionic Conky&#xff1a; Hi-Tek Conky&#xff1a; Con…

大型门户网站的可伸缩性架构设计

大型门户网站的可伸缩性架构设计2009-12-28 来源&#xff1a;网络我们知道&#xff0c;对于一个大型门户网站来说&#xff0c;可伸缩性是非常重要的&#xff0c;怎么样在纵向和横向有良好的可伸缩性&#xff0c;就需要在做架构设计的时候考虑到一个分的原则&#xff0c;我想在多…

实现 laravel 的artisan

laravel 的 artisan 命令行太好用了&#xff0c;换个框架没有这个功能&#xff0c;于是自己学习实现一些&#xff0c;直接上代码 新建目录 -artisan --bin --src 进入artisan composer init composer require symfony/console #!/usr/bin/env php<?phpuse Symfony\Comp…

计算机语言学 考研学校,2019考研专业:语言学及应用语言学

中国教育在线讯 2019考研&#xff0c;对考研专业了解越多&#xff0c;考研人越易选出适合自己的方向&#xff0c;中国教育在线考研频道将陆续推出2019考研业解析系列&#xff0c;进行基本的专业介绍&#xff0c;探析就业前景与方向&#xff0c;推荐知名院校&#xff0c;介绍相近…

iOS CoreAnimation

为什么80%的码农都做不了架构师&#xff1f;>>> 前言&#xff1a;这篇文章太全了&#xff0c;忍不住就转了&#xff0c;原地址 CoreAnimation&#xff0c;另外前面写过一篇简单的动画IOS简单动画 核心动画,开发人员可以为他们的应用创建动态用户界面,而无需使用低级…