jquery 无限极下拉菜单的简单实例(精简浓缩版)


Posted in Javascript onMay 31, 2016

jquery 无限极下拉菜单的简单实例(精简浓缩版)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>三水点靠木 3water.com</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".menu li").hover(function(){
		$(this).children("ul").show(); //mouseover
	},function(){
		$(this).children("ul").hide(); //mouseout
	});
});
</script>
<style type="text/css">
ul{ list-style:none; margin:0; padding:0;}
.menu { height:30px; line-height:30px; }

.menu li { float:left; position:relative;} /*这一级是导航*/
.menu li a { display:block; height:30px; line-height:30px; padding:0 20px; }
.menu li a:hover { color:#000; background:#EFEFEF; }
.menu li a.more { color:red; }

.menu li ul { position:absolute; float:left; width:150px; border:1px solid #000; display:none;} /*这是第二级菜单*/
.menu li ul a { width:110px; }
.menu li ul a:hover { background:gray;}

.menu li ul ul{ top:0;left:150px;} /*从第三级菜单开始,所有的子级菜单都相对偏移*/
</style>

</head>
<body>

<ul class="menu">
<li><a href="#">菜单一</a>
<ul class="one">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#" class="more">菜单五</a>
<ul class="two">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#" class="more">菜单五</a>
<ul class="three">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#" class="more">菜单五</a>
<ul class="four">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#" class="more">菜单五</a>
<ul class="four">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#">菜单五</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单二</a>
<ul class="one">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#" class="more">菜单三</a>
<ul class="two">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#" class="more">菜单三</a>
<ul class="three">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#">菜单五</a></li>
</ul>
</li>
<li><a href="#">菜单四</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a></li>
<li><a href="#">菜单五</a>
<ul class="one">
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a></li>
<li><a href="#">菜单三</a></li>
</ul>
</li>
</ul>

</body>
</html>

以上这篇jquery 无限极下拉菜单的简单实例(精简浓缩版)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
JavaScript中的this实例分析
Apr 28 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
Mar 22 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
通用无限极下拉菜单的实现代码
May 31 #Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 #Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 #Javascript
JavaScript中的操作符类型转换示例总结
May 30 #Javascript
jQuery中的通配符选择器使用总结
May 30 #Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 #Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 #Javascript
You might like
几种显示数据的方法的比较
2006/10/09 PHP
PHP通用检测函数集合
2006/11/25 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP中Array相关函数简介
2016/07/03 PHP
JavaScript 变量作用域分析
2011/07/04 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
详解js创建对象的几种方式和对象方法
2021/03/01 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
Django框架 querySet功能解析
2019/09/04 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
python 装饰器重要在哪
2021/02/14 Python
临床医学大学生求职信
2013/09/28 职场文书
个人自我鉴定
2013/11/07 职场文书
生日宴会答谢词
2014/01/09 职场文书
打造完美自荐信
2014/01/24 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
工会趣味活动方案
2014/08/18 职场文书
毕业生个人总结
2015/02/28 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
vscode中使用npm安装babel的方法
2021/08/02 Javascript