jquery 下拉菜单 html,jQuery实现下拉菜单的实例代码

基本效果是这样的~~

* {

margin: 0;

padding: 0;

}

ul {

list-style: none;

}

.wrap {

width: 330px;

height: 30px;

margin: 100px auto 0;

padding-left: 10px;

background-color: skyblue;

}

.wrap li {

background-color: skyblue;

}

.wrap > ul > li {

float: left;

margin-right: 10px;

position: relative;

}

.wrap a {

display: block;

height: 30px;

width: 100px;

text-decoration: none;

color: #000;

line-height: 30px;

text-align: center;

}

.wrap li ul {

position: absolute;

top: 30px;

display: none;

}

$(function () {

//获取所有li，添加移入事件

$(".wrap>ul>li").mouseenter(function () {

//设置内部的子元素ul slideDown

$(this).children("ul").stop().slideDown(600);

});

//移出li时，让内部子元素slideUp

$(".wrap>ul>li").mouseleave(function () {

$(this).children("ul").stop().slideUp(600);

});

//如果当前运动没有完毕，又添加了新的动画，这时新的动画需要等待当前动画执行完毕才会开始

//如果持续添加。一定会造成动画的积累，这种情况我们称为动画队列

});

• 一级菜单1

  • 二级菜单11
  • 二级菜单12
  • 二级菜单13

• 一级菜单2

  • 二级菜单21
  • 二级菜单22
  • 二级菜单23

• 一级菜单3

  • 二级菜单31
  • 二级菜单32
  • 二级菜单33

以上所述是小编给大家介绍的jQuery实现下拉菜单的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！