<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单(无限级)</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style-type: none;
}
body{
margin: 50px;
}
.hide{
display: none;
}
.menu{
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li class="menu" style="float: left;">
<span>一级菜单</span>
<ul class="hide">
<li class="menu">
<span>二级菜单</span>
<ul class="hide">
<li class="menu">
<span>三级菜单</span>
<ul class="hide">
<li class="menu">
<span>四级菜单</span>
<ul class="hide">
<li class="menu"><span>五级菜单</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu" style="float: left;">
<span>一级菜单</span>
<ul class="hide">
<li class="menu">
<span>二级菜单</span>
<ul class="hide">
<li class="menu">
<span>三级菜单</span>
<ul class="hide">
<li class="menu">
<span>四级菜单</span>
<ul class="hide">
<li class="menu"><span>五级菜单</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script src="jquery.js"></script>
<script>
$(function(){
var menu = $('.menu');
menu.hover(function(){
$(this).children('ul').show();
},function(){
$(this).children('ul').hide();
});
});
</script>
</body>
</html>
效果图：
相关推荐
"jQuery手机端无限级导航下拉菜单代码"就是一个解决此类问题的方案，它允许用户在一个简洁的界面下访问多级菜单，而无需展开多个屏幕。本文将详细介绍这个代码实现的关键技术和原理。 首先，jQuery是一个广泛使用的...
如果不打算兼容ie6，那么把jq删除后，就是纯css写的无限级横向下拉导航菜单，经测试，暂未发现不兼容的浏览器。目前演示页已经添加到十一级导航！还可添加更多，代码非常简单，就是一直嵌套，样式也非常少，简单明了...
在本文中，我们将深入探讨如何使用jQuery实现一个无限级联的下拉菜单。这个功能对于构建具有层次结构数据的Web应用程序非常有用，例如在组织结构、地区选择或产品分类等场景。下面，我们将分析实现这一功能的关键点...
在这个例子中，我们将探讨如何使用jQuery来实现一个无限级的下拉菜单，通过解析JSON数据来动态生成菜单结构。 首先，我们需要理解JSON数据的结构。在给出的例子中，`menuData` 是一个包含多个对象的数组，每个对象...
【jQuery无限级联】是一种在Web开发中实现下拉列表联动的技术，常见于构建多级导航菜单或选择树形结构的数据。在这个特定的场景中，它用于Java Web项目，允许用户逐级选择嵌套的层级关系，如地区、部门或者类别等。...
在这个实例中，我们基于jQuery 1.8.3版本来构建下拉菜单，这个版本稳定且兼容性良好。 在CSS样式方面，我们定义了一些基础的样式规则，如清除默认的边距和填充，设置字体大小，以及为菜单项设置宽度、对齐方式和...
例如，当屏幕宽度变小时，可以将子菜单折叠成一个下拉菜单。 总结来说，"jQuery无限极左侧导航栏代码"涉及的关键技术包括HTML和CSS的基础知识，jQuery的选择器、遍历、事件处理和DOM操作，以及递归逻辑的应用。通过...