下拉菜单列表
当鼠标进入时，效果如下：
鼠标离开时，下拉列表进行隐藏。效果如下：
下面展示代码
//<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{padding: 0px;margin: 0px;list-style: none;}.box{margin: 100px auto;width: 340px;height: 30px;background: url(项目J3-11/images/bg.jpg);}.box li{width: 100px;height: 30px;background: url(项目J3-11/images/libg.jpg);float: left;margin-left: 10px;text-align: center;line-height: 30px;cursor: pointer;position: relative;left: 0px;}.box li ul{text-align: center;display: none;position:absolute;top: 30px;left: 0px;}</style></head><body><ul class="box"><li>我的淘宝<ul><li>已买到的宝贝</li><li>我的足迹</li><li>购物车</li></ul></li><li>商品分类<ul><li>日化用品</li><li>精品服饰</li><li>零食百货</li></ul></li><li>卖家中心<ul><li>商品列表</li><li>销售管理</li><li>订单管理</li></ul></li></ul></body><script src="jquery-1.7.2.min.js"></script><script>//jquery的代码我们通常会包裹在一个$(function(){})函数中//$(function() {}) 是$(document).ready(function()的简写$(function(){//ready事件提供页面加载事件，只需Dom元素加载完成后便可触发//“$(参数)”创建jquery实例对象，为它绑定mouseover的鼠标事件，鼠标进入触发，参数为事件的处理程序，即匿名函数//$('.box>li')层次选择器中的子元素选择器，获取类名为box下的li元素/* $('.box>li').mouseover(function(){//slideDown() 方法用于向下滑动元素。$(this).children().slideDown(500);});$('.box>li').mouseout(function(){//slideUp() 方法用于向上滑动元素。speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。$(this).children().slideUp(500);}); *//* slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它6们。该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 slideDown()，如果一个元素是可见的，则运行 slideUp() - 这会造成一种切换的效果。 */$('.box>li').hover(function(){//为导航中的每个选项注册移入移出事件//children()方法代替子元素选择器，获取指定元素的子元素。返回被选元素的所有直接子元素/* stop()方法用于停止动画效果，如元素上滑下滑，可以让动画队列后面的动画提前执行在不传递参数时，表示立即停止当前正在执行的动画，开始执行动画队列中的下一个动画 */$(this).children().stop().slideToggle(500);/* 1 链式编程：如果一直对同一个元素进行函数操作，可以使用".函数名"一直写下去2 因为jquery对象调用方法，返回值是jquery对象本身。就用 .语法调用自身方法*/});})</script></html>
