脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery 无限极下拉菜单

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

 更新时间：2016年05月31日 08:51:50   投稿：jingxian  
下面小编就为大家带来一篇jquery 无限极下拉菜单的简单实例(精简浓缩版)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>脚本之家 www.jb51.net</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 无限极下拉菜单的简单实例(精简浓缩版)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • jquery插件实现图片对比

    jquery插件实现图片对比

    这篇文章主要为大家详细介绍了jquery插件实现图片对比，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-04-04
  • Jquery实现顶部弹出框特效

    Jquery实现顶部弹出框特效

    本文给大家分享的是jquery顶部浮动弹出层，点击浮动层动画弹出层，弹出层从顶部动画滑动效果，效果非常不错，推荐给大家。
    2015-08-08
  • jquery实现超简洁的TAB选项卡效果代码

    jquery实现超简洁的TAB选项卡效果代码

    这篇文章主要介绍了jquery实现超简洁的TAB选项卡效果代码,涉及jquery通过鼠标click事件结合链式操作动态操作tab选项卡的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery获取当前点击的对象元素(实现代码)

    jQuery获取当前点击的对象元素(实现代码)

    下面小编就为大家带来一篇jQuery获取当前点击的对象元素(实现代码)。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
    2016-05-05
  • jQuery操作CheckBox的方法介绍(选中,取消,取值)

    jQuery操作CheckBox的方法介绍(选中,取消,取值)

    本篇文章主要是对jQuery操作CheckBox的方法(选中,取消,取值)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • jQuery 页面 Mask实现代码

    jQuery 页面 Mask实现代码

    何为页面 Mask (遮罩)？看过 jQuery 的 Lightbox 插件的一定不会陌生。就是在页面上建一个透明层遮盖住页面的全部内部。
    2010-01-01
  • jQuery插件制作的实例教程

    jQuery插件制作的实例教程

    一款优秀的jQuery插件,要做到通用、灵活度高、可配置、兼容性好、易用性高、耦合度低...想要做到这些,嘿嘿,那么就来看今天所介绍的jQuery插件制作的实例教程.
    2016-05-05
  • 推荐6款基于jQuery实现图片效果插件

    推荐6款基于jQuery实现图片效果插件

    这里给大家汇总了一下个人比较常用的基于jQuery实现的图片特效的插件，个人感觉非常不错，这里分享给大家
    2014-12-12
  • JQuery中serialize()、serializeArray()和param()方法示例介绍

    JQuery中serialize()、serializeArray()和param()方法示例介绍

    serialize()方法也是作用于一个JQuery对象，它能够将DOM元素内容序列化为字符串，serializeArray()方法不是返回字符串，而是将DOM元素序列化后，返回JSON格式的数据
    2014-07-07
  • jquery 之 $().hover(func1, funct2)使用方法

    jquery 之 $().hover(func1, funct2)使用方法

    .hover(func1, func2) 的效果等效于： mouseenter(), mouseleave()
    2012-06-06

最新评论