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 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
JavaScript编码小技巧分享
Sep 17 Javascript
JavaScript ES6的函数拓展
Jan 18 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
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
树结构之JavaScript
2017/01/24 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
vue实现简单加法计算器
2020/10/22 Javascript
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python多线程同步实例教程
2019/08/11 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
家居饰品店创业计划书
2014/01/31 职场文书
幼儿评语大全
2014/04/30 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
门面租赁合同范文
2019/08/06 职场文书
创业计划书之甜品店
2019/09/18 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server
Django使用redis配置缓存的方法
2021/06/01 Redis
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis
mysql的单列多值存储实例详解
2022/04/05 MySQL