此导航菜单只适用于二级菜单，三级或更多级就没试过了。。
html架构是这样的：

<ul>
	<li>首页</li>
	<li>关于我们 
	<ul>
		<li>集团简介</li>
		<li>企业历程</li>
		<li>企业文化</li>
		<li>集团荣誉</li>
		<li>加工基地</li>
		<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>
		<li>台面板</li>
		<li>洗手盆</li>
		<li>壁炉</li>
		<li>异型</li>
	</ul>
	</li>
	<li>解决方案  
	<ul>
		<li>生产设备</li>
		<li>花园式工厂</li>
		<li>荒料堆场</li>
		<li>体验式展厅</li>
	</ul>
	</li>
	<li>案例展示 
	<ul>
		<li>销售服务</li>
		<li>销售网络</li>
		<li>石材知识</li>
	</ul>
	</li>
	<li>服务支持</li>
	<li>联系我们</li>
</ul>

CSS样式是这样的：

/*
 * @author: Allen Kung
 * @date: 16/04/2009
 * CSS for xcot.com
 */
* {list-style-type:none;margin:0; padding:0}
a:hover {text-decoration:underline;}
i {
 font-size: 11px;
 color: red;
}
img {border:none;}
li {list-style:none;}
.hide {display:none;}
.clear {
 clear: both;
    height:1px;
    margin-top:-1px;
    overflow:hidden;
}
#wrap {
 margin:auto;
 width:747px;
}
/* @group main_nav */
#main_nav ul {
 font-size: 13px;
 list-style: none;
 
}
#main_nav {
 background: url(../image/20110218003.jpg) repeat-x top left;
 height: 35px;
 overflow: visible;
 margin:0; padding:0
}
#main_nav li {
 float: left;
 position: relative;
 z-index: 5;
}
#main_nav li a {
 color: #666;
 display: block;
 width: 83px;
 height: 35px;
 text-decoration: none;
 line-height: 40px;
 text-align: center;
 font-weight:bold;
}
#main_nav li ul li a {
 font-size: 12px;
 width: 81px;
 height: 25px;
 line-height: 25px;
 margin: 0px;
 color:#FFF;
}
#main_nav li ul li a:hover, #main_nav li.focus ul li a:hover {
 background: #005b8d;
}
#main_nav li.focus a, #main_nav li a:hover {
 background: url(../image/navl.jpg) repeat-x;color:#FFF
}
#main_nav li.focus ul li a {
 background: none;
}
#main_nav li ul {
 position: absolute;
 top: 35px;
 left: 0px;
 background: #007fc5;
 border-color: #005b8d;
 border-style: none solid solid;
 border-width: medium 1px 1px;
 display: none;
 
}
#main_nav li ul li{
 float: none;
}
/* @end */

JQ代码是这样的：

$.fn.extend({
 allenMenu: function() {
  $(this).children('ul').children('li').hover(
   function() {
    if(!$(this).children('ul').hasClass('focus')) {
     $(this).addClass('focus');
     $(this).children('ul:first').stop(true, true).animate({ height:'show' }, 'fast');
    }
   },
   function() {
    $(this).removeClass('focus');
    $(this).children('ul:first').stop(true, true).animate({ height:'hide', opacity:'hide' }, 'slow');
   }
  );
  $(this).children('ul').children('li').children('ul').hover(
   function() {
    $(this).addClass('focus');
   },
   function() {
    $(this).removeClass('focus');
   }
  );
 }
});
$.fn.extend({
 allenSlide: function() {
  var ads = $(this).find('ul:first li');
  var name = $(this).attr('id');
  var n = ads.length;
  var w = ads.width();
  var h = ads.height();
  var clicked = false;
  var t = 4000;
  var lt = 5000;
  var speed = 'slow';
  var curPage = 0;
  
  //$(this).children('ul:first').append($(this).find('ul:first li:first').clone());
  
  $(this).width(w).height(h);
  $(this).css('overflow', 'hidden');
  $(this).css('position', 'relative');
  $(this).children('ul:first').width(w * (n + 1));
  var pages = $('');
  for(var i = 1; i <= n; i++) {
   var el = $('' + i + '');
   eval('el.click(function(){ clicked = true; slideTo(' + i + '); return false; });');
   pages.append(el);
  }
  $(this).append(pages);
  $('#' + name + '-page-1').parent().addClass('on');
  autoSlide();
  
  /* Fade Version
  */
  function slideTo(page) {
   curPage = page;
   var ml = -1 * w * (page - 1);
   $('#' + name).find('li:eq('+(curPage-1)+')').stop();
   if(page > n) {
    page = 1;
    curPage = 1;
   }
   $('#' + name).find('li').each(function() {
    if($(this).css("display") != "none") {
     //$(this).css('z-index', '2');
     $(this).fadeOut(speed);
    }
   });
   //$('#' + name).find('li:eq('+(page-1)+')').css('z-index', '1');
   $('#' + name).find('li:eq('+(page-1)+')').fadeIn(speed);
   $('#' + name).find('.slide-page > a').removeClass('on');
   $('#' + name + '-page-' + curPage).addClass('on');
  }
  /* Slide Version
  function slideTo(page) {
   curPage = page;
   var ml = -1 * w * (page - 1);
   $('#' + name).children('ul:first').stop();
   if(page > n) {
    curPage = 1;
   } else if(page == 2 && !clicked) {
    $('#' + name).children('ul:first').css('margin-left', '0px');
   }
   $('#' + name).children('ul:first').animate({ marginLeft: ml }, speed);
   $('#' + name).find('.slide-page > a').removeClass('on');
   $('#' + name + '-page-' + curPage).addClass('on');
  }
  */
  
  function autoSlide() {
   var tp = curPage;
   if(!clicked) {
    slideTo(tp + 1);
    eval('setTimeout(function() { autoSlide(); }, ' + t + ');');
   } else {
    clicked = false;
    eval('setTimeout(function() { autoSlide(); }, ' + lt + ');');
   }
  }
 }
});

此代码用在WordPress导航上也很正常，并且所有浏览器通吃。。。还是不错的，缺点就是不支持多级子菜单。。。