jquery 无限极下拉菜单的简单实例(精简浓缩版)
jquery无限极下拉菜单的简单实例(精简浓缩版)
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width">
<title>毛票票www.nhooo.com</title>
<scripttype="text/javascript"src="js/jquery-1.9.1.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$(".menuli").hover(function(){
$(this).children("ul").show();//mouseover
},function(){
$(this).children("ul").hide();//mouseout
});
});
</script>
<styletype="text/css">
ul{list-style:none;margin:0;padding:0;}
.menu{height:30px;line-height:30px;}
.menuli{float:left;position:relative;}/*这一级是导航*/
.menulia{display:block;height:30px;line-height:30px;padding:020px;}
.menulia:hover{color:#000;background:#EFEFEF;}
.menulia.more{color:red;}
.menuliul{position:absolute;float:left;width:150px;border:1pxsolid#000;display:none;}/*这是第二级菜单*/
.menuliula{width:110px;}
.menuliula:hover{background:gray;}
.menuliulul{top:0;left:150px;}/*从第三级菜单开始,所有的子级菜单都相对偏移*/
</style>
</head>
<body>
<ulclass="menu">
<li><ahref="#">菜单一</a>
<ulclass="one">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#">菜单三</a></li>
<li><ahref="#">菜单四</a></li>
<li><ahref="#"class="more">菜单五</a>
<ulclass="two">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#">菜单三</a></li>
<li><ahref="#">菜单四</a></li>
<li><ahref="#"class="more">菜单五</a>
<ulclass="three">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#">菜单三</a></li>
<li><ahref="#">菜单四</a></li>
<li><ahref="#"class="more">菜单五</a>
<ulclass="four">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#">菜单三</a></li>
<li><ahref="#">菜单四</a></li>
<li><ahref="#"class="more">菜单五</a>
<ulclass="four">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#">菜单三</a></li>
<li><ahref="#">菜单四</a></li>
<li><ahref="#">菜单五</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">菜单二</a>
<ulclass="one">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#"class="more">菜单三</a>
<ulclass="two">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#"class="more">菜单三</a>
<ulclass="three">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#">菜单三</a></li>
<li><ahref="#">菜单四</a></li>
<li><ahref="#">菜单五</a></li>
</ul>
</li>
<li><ahref="#">菜单四</a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="#">菜单三</a></li>
<li><ahref="#">菜单四</a></li>
<li><ahref="#">菜单五</a>
<ulclass="one">
<li><ahref="#">菜单一</a></li>
<li><ahref="#">菜单二</a></li>
<li><ahref="#">菜单三</a></li>
</ul>
</li>
</ul>
</body>
</html>
以上这篇jquery无限极下拉菜单的简单实例(精简浓缩版)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。