[导读]本文通过实例代码说明了jQuery实现下拉菜单的效果
基本效果是这样的~~。
html
*{
margin:0；
padding:0；
}
ul{
列表样式： none；
}
. wrap{
width:330px；
height:30px；
margin:100pxauto0；
padding-left:10px；
背景色：天空蓝；
}
. wrapli{
背景色：天空蓝；
}
. wrapulli{
浮点：左；
margin-right:10px；
position:relative；
}
. wrapa{
显示： block；
height:30px；
width:100px；
文本修饰：无；
color:#000；
line-height:30px；
文本对齐3360中心；
}
. wrapliul{
位置： absolute；
top:30px；
显示：无；
}
$ (功能() ) )。
//获取所有li并添加移动
$ '.wrap ulli '.mouse enter (function ) ) ) )。
//设置内部子元素ulslideDown
$(this ).Children('ul ).stop ).slidedown ) ) 600；
)；
//Li外出时，使内部的子要素滑动上升
$('.wrapulli ' ).mouseleave(function ) ) )。
$(this ).Children('ul ).stop ).slideup ) ) 600；
)；
//如果当前运动尚未结束且添加了新动画，则新动画必须等待当前动画运行结束
//如果继续添加。 一定会引起动画的积累。 这种情况称为动画队列
)；
一级菜单1
二级菜单11二级菜单12二级菜单13一级菜单2
二级菜单21二级菜单22二级菜单23一级菜单3
二级菜单31二级菜单32二级菜单33