以前也写过关于JQuery制作二级菜单的方法，今天自己彻底研究了一下无限级的下拉菜单，总结一下制作方法。相信无限级的会做了以后你就能掌握下拉菜单这个技术了。进入正题…

我先给出我的基本制作流程：

1.写出结构合理的xhtml。 主要用到列表ul的嵌套。

2.写好布局的CSS代码。 主要给子菜单定位和相关设置。

3.写出JQuery代码。 主要用到JQuery的一个hover()方法

一：xhtml

为了不至于太乱我们可以先研究一个菜单的xhtml代码。我写出了我认为比较合理的一种，如果你看起来吃力的话有个好办法就是抄十遍：

<li><a href="#">Menu1</a>	//.menu1是菜单的个数，可以整体copy
    <ul>	//.item的作用是为隐藏后面的li，.menu的作用是为JQuery提供循环
      <li><a href="#">Menu-item1</a></li>
      <li><a href="#">Menu-item2</a></li>
      <li><a href="#">Menu-item3</a></li>
      <li><a href="#">Menu-item4</a>
      	<ul>
              <li><a href="#">Menu-item1</a></li>
              <li><a href="#">Menu-item2</a></li>
              <li><a href="#">Menu-item3</a></li>
              <li><a href="#">Menu-item4</a></li>
         </ul>
      </li>
    </ul>
  </li>

注意：这里我只给出了两个子菜单，要让它无限扩充的话只要把”ul.menu”所有代码复制到你相加的子菜单的li标签里面的a标签之后

二：核心CSS代码

.menu 		{ width:100px; float:left; border-right:5px solid #000}
.menu1		{ float:left; width:100px;}
#menu li 	{ width:100px;}
.menu a 	{ height:25px; line-height:25px; width:100px;
 border:1px solid #f00; display:block; text-align:center; }

.item li 	{ display:none;}	/*通常情况下隐藏子菜单*/
.item li 	{ position:relative;}

/*设置相对定位，便于子菜单位于父菜单的右侧100px*/

.item li ul { position:absolute; left:100px; top:0;}

三：JQuery代码

$(function (){
	$(".menu li").hover(

       //让.menu下面的列表项li响应鼠标移到到上面的事件
		function (){
			$(this).children().children("li").fadeIn();
			//当前对象的子子元素li淡入
		},
		function (){
			$(this).children().children("li").fadeOut();
			//当前对象的子子元素li淡出
		}
	);
});

最终代码与效果预览

注意:IE6中会出现一点bug，如果你知道解决方法的话可以谈讨一下
感谢 倾心 同学的帮助，菜单在IE6下的响应问题已解决.