期待jQuery UI 的menu，先根据M2版改造一个无限层级菜单

废话少说先上代码：

	$(function() {
	/*init menu*/
		var hideTimer;
		var setHover = function(o,state) {
			var p = o.parent;
			if (p == null) return;
			p.ishover = state;
			setHover(p,state);
		};
		var allmenuobj = function() {
			this.menus=new Array();
		};
		allmenuobj.prototype.add = function(menu) {
			menu.num = this.menus.push(menu)-1;
			return menu.num;
		};
		allmenuobj.prototype.get = function(num) {
			if (num < this.menus.length) return this.menus[num];
			return null;
		};
		allmenuobj.prototype.hideother = function(num) {
			for (var i=0;i<this.menus.length;i++) {
				this.menus[i].ishover = false;
			}
			if (num < this.menus.length -1 ) {
				var menu = this.menus[num];
				menu.ishover = true;
				setHover(menu, true);
				for (var i=this.menus.length-1;i>=0;i--) {
					var gmenu = this.menus[i];
					if (!gmenu.ishover) {
						gmenu.$$.hide();
					}
				}
			}
			return false;
		};
		var menuObj = function(o,p,n){
			this.$$ = o || null;
			this.parent = p || null;
			this.num = n || -1;
			this.ishover = false;
		};
		var allmenu = new allmenuobj();
		$(".demo > button").button({
			icons: {
				//primary: "ui-icon-home",
				secondary: "ui-icon-triangle-1-s"
			}
		}).each(function() {
			var menu = $(this).next();
			var menuo = new menuObj(menu,null);
			var n = allmenu.add(menuo);
			menu.attr('menuindex', n)
			.menu({
				select: function(event, ui) {
					$(this).hide();
					location.href = ui.item.children('a').attr('href');
				},
				input: $(this)
			})
			.hide()
			.find('li:has(ul)')
			.each(function() {
				var cmenu = $(this)
				.find('a:eq(0)').wrapInner('<span class="ui-menu-item-text"></span>').append('<span class="ui-icon ui-icon-triangle-1-e"></span>')
				.hover(
					function() {
						clearTimeout(hideTimer);
						var ccmenu = $(this).next();
						allmenu.hideother(ccmenu.attr('menuindex'));
						ccmenu.menu("deactivate").show().css({top:0, left:0}).position({
							my: "left top",
							at: "right top",
							of: this
						});
					},
					function() {
						var ccmenu = $(this).parents('ul');
						var childrenMenu = $(this).next();
						if (ccmenu.is(":visible")) {
							hideTimer = setTimeout(function(){
								childrenMenu.hide();ccmenu.hide();
							},500);
						}						
					}
				).next();
				var cmenuo = new menuObj(cmenu,allmenu.get($(this).parent().attr('menuindex')));
				var n = allmenu.add(cmenuo);
				cmenu.attr('menuindex', n)
				.menu({
					select: function(event, ui) {
						$(this).hide();
						location.href = ui.item.children('a').attr('href');
					},
					input: $(this)
				}).hide();
			});	
			menu.find('li:not(:has(ul))')
			.each(function() {
				$(this).find('a:eq(0)').hover(
					function() {
						clearTimeout(hideTimer);
						var cmenu = $(this).parents('ul');
						allmenu.hideother(cmenu.attr('menuindex'));
					},
					function() {
						var cmenu = $(this).parents('ul');
						if (cmenu.is(":visible")) {
							hideTimer = setTimeout(function(){
								cmenu.hide();
							},500);
						}						
					}
				);
			});
		}).mouseover(function(event) {
			clearTimeout(hideTimer);
			var menu = $(this).next();
			allmenu.hideother(menu.attr('menuindex'));
			menu.menu("deactivate").show().css({top:0, left:0}).position({
				my: "left top",
				at: "left bottom",
				of: this
			});
		}).mouseout(function(event) {
			var menu = $(this).next();
			if (menu.is(":visible")) {
				hideTimer = setTimeout(function(){
					menu.hide();
				},500);
			}
		});
	});

	<style>
		.ui-menu { position: absolute; z-index:9999;min-width:9em;_width:9em;}
		.ui-menu-item a {
			position:relative; display: inline-block;zoom: 1; overflow: visible;white-space:nowrap;
		}
		* html .ui-menu-item a {width:120%;}
		*+html .ui-menu-item a {min-width:9em;}
		.ui-menu a span.ui-icon { right: .5em; position: absolute; top: 50%; margin-top: -8px; }
		.ui-menu a span.ui-menu-item-text {padding:0 2.1em 0 0;}
	</style> 

另外，咱不懂css，不知道怎么回事在ie6和ie7中a标签添加了箭头图标后，其它同级的a标签宽度不能自动增加，只能在样式里面重新定义，哪位大侠给俺解答一下，不胜感激。

* html .ui-menu-item a {width:120%;}/*ie6更是变态，居然要到120%才能完全充满li标签*/
*+html .ui-menu-item a {min-width:9em;}/*for ie7*/

 在ie6中必须先隐藏下级菜单，才不会出现下级菜单隐藏不完全的问题，有兴趣的看官可将“childrenMenu.hide();”注销，将“for (var i=this.menus.length-1;i>=0;i--) {”改为“for (var i=0;i<this.menus.length;i++) {”然后测试（在浏览第一个菜单的时候，快速移动第二个菜单，然后再看第一个菜单）就会发现这个问题。当然能够告诉我为什么最后，不胜感激。

哪位有空也请帮忙优化一下代码，实在本人水平有限。

预览：

 

 

至于jQuery UI 1.9M2版可上googlecode下载：下载 jQuery UI 1.9 M2

修改的文件在压缩包里面。