可自动确定二级菜单显示位置的横向菜单效果 [jQuery]

效果：

可自动确定显示位置的横向二级菜单预览

代码：

<ul id="nav">
	<li><a href="index.php?&lang=1">首页</a></li>
	<li><a href="page.php?cid=1&lang=1">公司简介</a>
		<ul class="submenu">
			<li><a href="page.php?cid=8&lang=1" 公司简介</a></li>
			<li><a href="page.php?cid=9&lang=1">中冠集团</a></li>
			<li><a href="page.php?cid=10&lang=1">公司历史</a></li>
			<li><a href="page.php?cid=11&lang=1">组织架构</a></li>
			<li><a href="page.php?cid=12&lang=1">荣誉证书</a></li>
			<li><a href="page.php?cid=13&lang=1">网上参观</a></li>
		</ul>
	</li>
	<li><a href="list_article.php?cid=2&lang=1">公司新闻</a></li>
	<li><a href="list_image.php?cid=3&lang=1">ERP解决方案</a></li>
	<li><a href="page.php?cid=5&lang=1">RFID系统方案</a></li>
	<li><a href="page.php?cid=6&lang=1">管理咨询</a>
		<ul class="submenu">
			<li><a href="page.php?cid=19&lang=1">生产流程改造</a></li>
			<li><a href="page.php?cid=20&lang=1">人力资源咨询</a></li>
			<li><a href="page.php?cid=21&lang=1">企业战略</a></li>
			<li><a href="page.php?cid=22&lang=1">IT解决方案</a></li>
			<li><a href="page.php?cid=23&lang=1">培训服务</a></li>
			<li><a href="page.php?cid=24&lang=1">商务咨询</a></li>
		</ul>
	</li>
	<li><a href="page.php?cid=18&lang=1">企业文化</a></li>
	<li><a href="page.php?cid=7&lang=1">联系我们</a></li>
</ul>
<script>
$(function(){
	/**
	 * 功能：动态调整二级菜单的位置、无二级的不显示小箭头
	 * 名称：二级菜单
	 * 作者：海锋互联 http://upall.cn
	 * 时间：10:10 2013年4月24日 星期三
	 */
	$('#nav > li').hover(function(){
		$('#nav > li').removeClass('hover');
		var isExistSubMenu = $('ul',this).length > 0 ? true : false;
		if(true == isExistSubMenu){
			$(this).addClass('hover');
			// 获取子菜单的位置
			var subNavMainContainerWidth = $(window).width();
			var subNav = $(this).children('ul.submenu');
			var subNavLeft = subNav.offset().left;
			// 获取子菜单宽度（子元素的宽度之和）
			var subNavElmNum = subNav.children('li').length;
			var subNavWidth = 0;
			for(var i=0; i<subNavElmNum; i++){
				subNavWidth += subNav.children('li')[i].offsetWidth;
			}
			subNav.css('width',subNavWidth+'px');
			// 设置子菜单左边距
			var maxLeft = subNavMainContainerWidth - subNavWidth;
			if(subNavLeft > maxLeft) subNav.css('left','-' + (subNavLeft - maxLeft) + 'px');
		}
	},function(){});
});
</script>

部分CSS代码：

#nav li {
	float:left;
	padding:0 25px;
}
#nav li.hover {
	background:url(../images/bgNavHover.gif) center bottom no-repeat;
	height:63px;
}
#nav li a {
	color:#FFF;
	font-size:1.2em;
	font-weight:bold;
}
#nav li a:hover {
	color:#DBFFB3;
}
#nav li li a {
	color:#94BE2C;
}
#nav li li a:hover {
	color:#060;
}
#nav li {
	position:relative;
}
#nav li ul {
	display:none;
	position:absolute;
	top:63px;
	left:0;
}
#nav li.hover ul {
	display:block;
	width:600px;
}
#nav li li {
	height:25px;
	line-height:25px;
	float:left;
	padding:0 10px;
	background:none;
}