横向二级下拉菜单是网页设计中常用的一种交互方式。本文介绍如何使用 jQuery 和 CSS 来实现一个绚丽的横向二级下拉菜单，并提供源码下载和详细的指导。
实现思路
我们可以通过 HTML 和 CSS 来实现一个简单的横向菜单，但是要添加下拉子菜单需要使用 JavaScript。在这里我们选择使用 jQuery 库来帮助我们实现。
HTML 结构
首先，我们需要定义菜单的 HTML 结构。下面是一个简单的例子：
-- -------------------- ---- -------
---- -------------
----
------ ------------ ----------
------ ------------ -----
----
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
-----
-----
------ ------------ ----------
------ ------------ ----------
-----
------这个 HTML 结构定义了一个 nav 元素作为菜单容器，它包含了一个 ul 元素作为菜单项的容器。每个菜单项包含一个 a 元素作为链接，以及可能的下拉子菜单。
CSS 样式
接下来，我们需要对菜单进行样式设置，使其成为一个水平排列的菜单。下面是一个基本样式：
-- -------------------- ---- ------- ----- - -------- ------ ------ ----- ----------------- ----- - ----- -- - -------- ----- ---------------- -------------- -------- -- ------- -- ---------------- ----- - ----- -- - --------- --------- - ----- - - -------- ------ ------ ------ ---------------- ----- -------- ---- ----- - ----- - -- - -- - ------- - ----------------- ----- - ----- -- -- - -------- ----- --------- --------- ---- ----- ----- -- ----------------- ----- -------- -- ------- -- - ----- -- -- -- - ------ ----- - ----- -- -- - - -------- ---- ----- -
这个样式定义了一个黑色背景的菜单，菜单项之间使用 flex 布局排列，并将每个菜单项设置为相对定位，以便后续添加下拉子菜单。
JavaScript 交互
现在，我们需要使用 jQuery 来添加交互效果。具体来说，我们需要使用以下事件：
mouseenter：当鼠标进入菜单项时，显示相应的下拉子菜单。mouseleave：当鼠标离开菜单项时，隐藏相应的下拉子菜单。
下面是实现代码：
$(document).ready(function() {
$('.menu > ul > li').mouseenter(function() {
$(this).children('ul').stop().slideDown();
}).mouseleave(function() {
$(this).children('ul').stop().slideUp();
});
});这段代码首先选择了所有一级菜单项，并在鼠标进入和离开时分别展示和隐藏相应的下拉子菜单。注意，这里使用了 jQuery 的 stop() 方法来处理连续的动画效果。
完整代码及演示
下面是完整的 HTML、CSS 和 JavaScript 代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>横向二级下拉菜单</ > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/4138) ，转载请注明来源 [https://www.javascriptcn.com/post/4138](https://www.javascriptcn.com/post/4138)