用jquery实现下拉菜单效果的代码

效果如下

这是菜单的内容，用保险商实验所标签实现菜单：复制代码代码如下： div id='menu' ul lia href=' '菜单一/a ul lia href=' '子菜单1/a/li lia href=' '子菜单2/a ullia href=' '子菜单7/a/li/ul /li lia子菜单3/a/li /ul /li lia菜单二/a ul lia href=' '子菜单4/a/li lia子菜单5/a/li lia子菜单6/a/li /ul /li /ul /div这是半铸钢钢性铸铁(铸造半钢)控制代码：复制代码代码如下ul :ol，Li {列表式：无；padd :0 pxmargin :0 px } # menu * {行高：30 px} #菜单a { text-decoration : none显示：块；} #菜单ul { text-align :左侧；背景技术： # 333;} #菜单。箭头{ /*菜单项的右侧小箭头*/float :右；填充-右侧：5 px} # menuul { height:30px} /*即使没有菜单项也能保持顶级菜单栏的高度。 *//* 一级菜单*/#菜单ulli { text-align : center显示：内嵌块；宽度：80 px} # menuullia { color : # fff } # menuulli :悬停{ background : # 666} /* 下拉的菜单栏*/#菜单ulli ul {显示：无；宽度宽度：150像素位置：绝对；背景技术# c1cd 94 box-shadow :2 px 2px 2px # 000；-web套件-box-shadow :2 px2px 2px # 000；-moz-box-shadow :2 px2px 2px # 123；} /* 下拉菜单的菜单项*/# menuulliul Li { padding-left :5 px；位置：相对；} # menuulliul lia { color : # 000；} # menuulliul Li :悬停{后台： # d3db 3；} /* 三级及以下的菜单项的定位*/# menuulliulli ul { left :150 px；top:0px} [html]这是射流研究…的控制代码：[代码] $(文档)。就绪（函数(){ /*菜单初始化*/$('#menuulliul ').find(' li:有(ul :没有(:空))a ').追加(' span class=' arrow '/span ')；//为有子菜单的菜单项添加''符号$('#menuulli ').bind('mouseover '，function() //顶级菜单项的鼠标移入操作{ $(这个)。儿童(' ul ').向下滑动("快速");}).bind('mouseleave '，function() //顶级菜单项的鼠标移出操作{ $(这个)。儿童(' ul ').向上滑动("快速");});$('#menuulliul li ').bind('mouseover '，function() //子菜单的鼠标移入操作{ $(这个)。儿童(' ul ').向下滑动("快速");}).bind('mouseleave '，function() //子菜单的鼠标移出操作{ $(这个)。儿童(' ul ').向上滑动("快速");});});出处：http://www .凯克斯。com/archives/下拉菜单-with-jquery.html