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 相关文章推荐
跟我学习javascript的全局变量
Nov 16 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
javascript自定义加载loading效果
Sep 15 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
优化NFR之一 --MSSQL Hello Buffer Overflow
2006/10/09 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
php cookie 详解使用实例
2016/11/03 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
Vue自定义指令详解
2017/07/28 Javascript
react路由配置方式详解
2017/08/07 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
vue观察模式浅析
2018/09/25 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
python 调用c语言函数的方法
2017/09/29 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Python urllib3软件包的使用说明
2020/11/18 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
最新的互联网创业计划书
2014/01/10 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
国际贸易系求职信
2014/08/09 职场文书
步步惊心观后感
2015/06/12 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis