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

前端技术 2023/09/05 JavaScript

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

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

本文地址：https://www.stayed.cn/item/14030

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案