jQuery实现了一个华丽的横向下拉菜单。

我曾经看到网站上有菜单显示，当鼠标移动时下拉菜单的效果就出现了。太华丽了。在观看jQuery视频之后，很容易找到实现。
在HTML中，所需的元素由标签上和标签上写出来。
复制代码代码如下所示：
菜单项1
子菜单项11
子菜单项12

菜单项2
子菜单项21
子菜单项22

菜单项3
子菜单项31
子菜单项32

最外层的元素是菜单项1、项目2、项目3、下拉菜单分别位于主菜单下，如果最外层菜单是UL，则李中每一主菜单的一层，如果有子菜单，则在里县主菜单中建立新的UL。依次，可设置多层次菜单设置。

CSS
复制代码代码如下所示：
UL
/清除点上的UL和李。
列表样式：无；
}
UL {
删除/子菜单缩进。
填充：0；
保证金：0；

}
直径{。
背景图片：URL（..）；在小三角形前面
背景：repeat-x重复；
宽度：120px；
}
李{
背景颜色：# eeeeee； / /背景图像覆盖的背景颜色
}
一个{
取消所有下划线
文字装饰：无；
左：20px填充；
显示：块；区域块集元素可以填充
显示：内联块；
宽度：100px；
3px垫上；
座垫：3px；
}
一个{直径。
颜色：白色；
背景图片：URL（..）；
后台重复：不重复；
背景：3px中心位置；
}
hmain Li {。
颜色：黑色；
背景图片：无；
}
UL {直径。
显示：无；
}
直径{。
浮点数：左；
右边距：1px；
}
js文件jquery.js和menu.js引用HTML，在menu.js如下：
复制代码代码如下所示：
$（文档）Ready（函数（）{）
页面已加载完成，可执行代码
$（。主>，。直径）。Click（函数（）{（）
对应于查找主菜单项的子菜单项
无功ulnode =美元（这）。二（UL）；
UlNode.slideToggle（）；
ChangeIcon（$（this））；
}）；
$（。直径）。Hover（function（）{）
$（这）。儿童（UL）。SlideToggle（）；
ChangeIcon（$（this）。儿童（））；
}函数（）{（）
$（这）。儿童（UL）。SlideToggle（）；
ChangeIcon（$（this）。儿童（））；
}）；
}）；
*
*修改主菜单的指示器图标
* /
功能changeicon（mainnode）{
如果（mainnode）{
如果（mainnode.css（背景图像）。IndexOf（崩溃。gif）> = 0）{
mainnode.css（背景图像
其他{ }
mainnode.css（背景图像
}
}
}

这个华丽的下拉菜单已经完成了，实现非常简单，但是里面的小知识是零碎的。例如，main和main A之间的区别是前者选择使用main的类元素，所有的节点，后者只选择主子节点中的一个节点。

这个例子很有用，在网站上使用，使界面更加美观，只看到3个例子，掌握时间，继续看…