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表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
Vue快速实现通用表单验证的示例代码
Jan 09 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
收听短波不可能有声音清晰的品质吗
2021/03/01 无线电
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Python中six模块基础用法
2019/12/08 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
什么是URL
2015/12/13 面试题
总经理岗位职责
2013/11/09 职场文书
给护士表扬信
2014/01/19 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
mysql数据库隔离级别详解
2022/06/16 MySQL