关注F2E-UED-SEO

不多说，先看效果：点击这里查看演示 | 点击这里下载实例

关键Js代码：

$(function(){
	  $(".select_list li:odd").addClass("currert");
	  $("#menuClick").click(function(){
		$("#vMenuList").slideToggle();
		return false;
	  });
	  $(".select_list > li > a").hover(function(){
		  $(this).animate({
			paddingLeft: 20
		  },100);
	      },function(){
		  $(this).animate({
			paddingLeft: 5
		  },50);
	 });
});

解释一下：

 $(".select_list li:odd").addClass("currert");

获取class=”select_list”下的li的偶数行给其添加class=”currert”,同时定义currert的样式，起到隔行换色的效果

$("#menuClick").click(function(){
		$("#vMenuList").slideToggle();
		return false;
	});

获取id=”menuClick” 通过鼠标点击触发事件，触发id为vMenuList的sildsToggle的事件。
这段才是下拉框或者是下拉菜单的核心代码！！

$(".select_list > li > a").hover(function(){
		$(this).animate({
			paddingLeft: 20
		},100);
	},function(){
		$(this).animate({
			paddingLeft: 5
		},50);
	});

这一段是鼠标下拉框的触发水平移动事件：
获取class=”select_list”下的子元素li的子元素a，当鼠标放上（hover）触发：animate事件，左边内边距20px;时间100ms(0.1秒)，当鼠标移开的时候再次触发animate事件，左边内边距5px;时间50ms(0.05秒)。