<!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>
效果图：
相关推荐
整理了一个js导航，最近正在做这个，其实看起来很简单，但是做起来还是要动下脑筋的，有用的去下载，也是找的别人的
**JQ导航弹性下拉菜单**是前端开发中常见的交互元素，主要应用于网站导航，提供清晰的层次结构，便于用户快速浏览和访问不同页面。它结合了jQuery库的强大功能，实现了菜单项的动态显示和隐藏，增加了用户体验的流畅...
"jQuery手机端无限级导航下拉菜单代码"就是一个解决此类问题的方案，它允许用户在一个简洁的界面下访问多级菜单，而无需展开多个屏幕。本文将详细介绍这个代码实现的关键技术和原理。 首先，jQuery是一个广泛使用的...
《JQ导航下拉菜单详解》 在网页设计中，导航菜单是不可或缺的一部分，它能够帮助用户快速定位和访问网站的不同部分。而JQuery（简称JQ）作为一款强大的JavaScript库，提供了丰富的功能来实现交互式的导航菜单，尤其...
在提供的压缩包中，"jq-down-menu.html"很可能是包含上述HTML结构和jQuery代码的示例文件，而"下拉.gif"则可能是一个动态图，展示了下拉菜单展开和收起的动画效果。 总之，通过jQuery，我们可以轻松实现一个功能...
总的来说，"米柚网jQ下拉菜单栏"是一个结合了jQuery、HTML5、CSS和JavaScript技术的前端实践案例，它展示了如何创建功能完备、响应式的下拉菜单。学习并理解这个代码可以帮助开发者提升前端技能，特别是对于那些希望...
jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表
jq下拉菜单而且还有动画
本项目提供了一个基于jQuery的下拉菜单解决方案，它特别强调了跨浏览器兼容性，确保在主流浏览器（如Chrome、Firefox、Safari、Edge和Internet Explorer）中都能正常工作。 首先，我们来看`menu.css`文件。这个CSS...
本教程将详细介绍如何使用jQuery（简称JQ）来实现一个动态的导航菜单，其中包括下拉和收起的效果。 首先，理解jQuery库的基础知识至关重要。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画...
《米柚网jQuery下拉菜单栏详解》 在网页设计中，导航菜单是不可或缺的部分，它为用户提供了方便快捷的页面跳转途径。米柚网的jQuery下拉菜单栏是针对这一需求精心设计的，其主要特点在于兼容主流浏览器，为用户提供...
"JQ下拉导航菜单"，特别是"MenuMatic3级导航菜单"，是一种基于JavaScript库jQuery实现的交互式下拉菜单，适用于创建多级导航结构。jQuery是一个广泛使用的JavaScript库，简化了HTML文档遍历、事件处理、动画以及Ajax...
jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单
记得之前我们给大家分享过一些飘带式的菜单，比如CSS3 飘带菜单 超酷3D CSS3菜单和CSS3飘带状多级下拉菜单；也分享过几款手风琴下拉菜单，可以在手风琴菜单栏目下查看。今天要分享的是一款飘带样式的垂直手风琴下拉...
而二级下拉菜单更是常见于大型网站，以有效地组织和展示多层次的页面结构。本资源"非常酷炫的jQuery+css超滑二级下拉菜单"正是针对这一需求，提供了一种既美观又流畅的解决方案。 首先，jQuery是一种轻量级、高性能...
在本文中，我们将深入探讨如何使用JavaScript库JQuery（简称JQ）来创建一个高效的、最少代码实现的导航栏下拉菜单。下拉菜单在现代网页设计中是必不可少的元素，它能帮助用户轻松访问网站的多层次结构。下面，我们将...
在网页设计中，交互性和用户体验是至关重要的因素之一，而下拉菜单作为网站导航系统中的常见元素，能够有效地组织和展示大量链接，提高用户在页面间的导航效率。本项目聚焦于利用jQuery实现一种具有动画效果的三级...
"jquery 滑动下拉效果菜单"是一个利用jQuery实现的动态下拉菜单功能，它提供了美观且流畅的滑动动画效果，增强了用户交互体验。 一、jQuery 基础 jQuery库的核心功能包括选择器（用于查找HTML元素）、DOM操作（如...
"jq+css3弹动下拉菜单 jquery+css3弹动渐变下拉菜单代码下载.zip" 提供的资源正是这样一个结合了jQuery和CSS3技术的动态效果下拉菜单。这个压缩包中的代码可以帮助开发者实现一个既美观又有动态反馈的菜单，提升用户...