jquery 无限极下拉菜单的简单实例(精简浓缩版) - [技术教程]

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>绿夏网 www.gimoo.net</title>
<script type="text/javascript" src="http://www.gimoo.net/t/1902/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="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单一</a>
<ul class="one">
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单一</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单二</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单三</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单四</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html" class="more">菜单五</a>
<ul class="two">
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单一</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单二</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单三</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单四</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html" class="more">菜单五</a>
<ul class="three">
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单一</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单二</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单三</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单四</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html" class="more">菜单五</a>
<ul class="four">
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单一</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单二</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单三</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单四</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html" class="more">菜单五</a>
<ul class="four">
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单一</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单二</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单三</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单四</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单五</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单二</a>
<ul class="one">
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单一</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单二</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html" class="more">菜单三</a>
<ul class="two">
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单一</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单二</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html" class="more">菜单三</a>
<ul class="three">
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单一</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单二</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单三</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单四</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单五</a></li>
</ul>
</li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单四</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单三</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单四</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单五</a>
<ul class="one">
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单一</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单二</a></li>
<li><a href="http://www.gimoo.net/t/1902/5c6a44ba074d1.html">菜单三</a></li>
</ul>
</li>
</ul>

</body>
</html>

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

#免责声明#

本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解！

文章分类