<!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，作为一款强大的JavaScript库，提供了丰富的功能来简化DOM...
jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单
记得之前我们给大家分享过一些飘带式的菜单，比如CSS3 飘带菜单 超酷3D CSS3菜单和CSS3飘带状多级下拉菜单；也分享过几款手风琴下拉菜单，可以在手风琴菜单栏目下查看。今天要分享的是一款飘带样式的垂直手风琴下拉...
而二级下拉菜单更是常见于大型网站，以有效地组织和展示多层次的页面结构。本资源"非常酷炫的jQuery+css超滑二级下拉菜单"正是针对这一需求，提供了一种既美观又流畅的解决方案。 首先，jQuery是一种轻量级、高性能...
在本文中，我们将深入探讨如何使用JavaScript库JQuery（简称JQ）来创建一个高效的、最少代码实现的导航栏下拉菜单。下拉菜单在现代网页设计中是必不可少的元素，它能帮助用户轻松访问网站的多层次结构。下面，我们将...
在网页设计中，交互性和用户体验是至关重要的因素之一，而下拉菜单作为网站导航系统中的常见元素，能够有效地组织和展示大量链接，提高用户在页面间的导航效率。本项目聚焦于利用jQuery实现一种具有动画效果的三级...
"jquery 滑动下拉效果菜单"是一个利用jQuery实现的动态下拉菜单功能，它提供了美观且流畅的滑动动画效果，增强了用户交互体验。 一、jQuery 基础 jQuery库的核心功能包括选择器（用于查找HTML元素）、DOM操作（如...