jQuery实现简单二级下拉菜单

今天我要分享一个非常实用且简单的二级下拉菜单代码，使用jQuery实现。如果你正在寻找这样的功能，那么这篇文章将会给你带来很大的帮助。

我们先来看一下HTML结构：

```html

```

接下来是CSS样式部分，它负责页面的布局和样式展示：

```css

body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd { padding: 0; margin: 0; }

li { list-style: none; }

img { border: none; }

u { text-decoration: none; }

em { font-style: normal; }

a { color: 424242; text-decoration: none; outline: none; } / 注意清除默认样式 /

body { font-size: 12px; font-family: Arial, Verdana, Helvetica, sans-serif; word-break: break-all; } / 基础样式 /

.box { margin: 0 auto; text-align: left; width: 920px; } / 常用样式 /

.clear { clear: both; } / 清空浮动 /

/ 【经典】弹出层菜单 /

.UpLayer { margin: 100px; } / 主菜单样式 /

.UpLayer dl dt { width: 50px; position: absolute; z-index: 3; padding: 0 5px; line-height: 20px; } / 主菜单标题样式 /

.UpLayer02 { border: c 1px solid; border-bottom: none; background: f1f1f1; margin: -1px 0 0 -1px; } / 二级菜单显示样式 /

.UpLayer dl dd { width: 80px; position: absolute; z-index: 2; border: c 1px solid; padding: 5px; line-height: 20px; background: f1f1f1; display: none; / 默认隐藏二级菜单 / margin: 19px 0 0 -1px; } / 二级菜单基础样式 /

.UpLayer dl dd a { display: block; border-bottom: c 1px dashed; } / 二级菜单内链接样式 /

```

我们用jQuery来实现二级下拉菜单的交互功能：

```javascript