jQuery仿驴妈妈旅游网导航菜单样式代码

一款jQuery仿驴妈妈旅游网导航菜单样式的代码，鼠标悬停于每个菜单时，会自动显示下面的二级菜单，鼠标离开时则收缩已显示的菜单，总体来说是一款比较通用的导航菜单代码，喜欢的童鞋请收下吧。

分类：导航菜单 > 下拉导航难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需设置好页面元素的样式，代码如下：

<style type="text/css">
*{
	padding: 0px;
	margin: 0px;
}
body{
	position: relative;
	font-size: 14px;
	background: #ccc;
	font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
ul{
	list-style: none;
}
a{
	text-decoration: none;
	color: #333;
}
.header-nav{
	background: #dd3377;
}
.contain{
	position: relative;
	width: 1010px;
	margin: 0 auto;
}
.trig{
	display: none;
	position: absolute;
	bottom: 0px;
	left: 45px;
	border-bottom: 6px solid lightsalmon;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
}
.second-bg{
	display: none;
	position: relative;
	width: 100%;
	height: 40px;
	background:#fff;
	z-index: 1;
}
.nav-list{
	position: relative;
	width: 100%;
	height: 40px;
	z-index: 2;
}
.nav-list>li{
	position: relative;
	float: left;
	width: 100px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-right: 1px solid #e4e4e4;
}
.nav-list>li>a{
	color: #fff;
	display: block;
	position: relative;
}
.nav-list>li ul{
	position: absolute;
	width: 100px;
	display: none;
	z-index: 666;
}
.nav-list>li ul li{
	float: left;
	height: 40px;
	font-size: 13px;
	line-height: 40px;
	margin: 0 2px;
}
.nav-list>li ul li a:hover{
	color: #dd3377;
}
</style>

页面的body部分，导航菜单实际上时多个ul和li的组合，代码如下：

<div class="header-nav">
	<div class="contain">
		<ul class="nav-list">
			<li>
				<a href="#">首页<span class="trig"></span></a>
			</li>
			<li>
				<a href="#">出境游<span class="trig"></span></a>
				<ul>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">当地玩乐</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">游轮</a></li>
					<li><a href="#">出境首页</a></li>
				</ul>
			</li>
			<li>
				<a href="#">国内游<span class="trig"></span></a>
				<ul>
					<li><a href="#">国内长途</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">周边跟团</a></li>
					<li><a href="#">自驾游</a></li>
					<li><a href="#">亲子游</a></li>
					<li><a href="#">酒店</a></li>
				</ul>
			</li>
			<li>
				<a href="#">出境游11<span class="trig"></span></a>
				<ul>
					<li><a href="#">出境首页1</a></li>
					<li><a href="#">游轮111</a></li>
					<li><a href="#">出境首页</a></li>
				</ul>
			</li>
			<li>
				<a href="#">出境游002<span class="trig"></span></a>
				<ul>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">当地玩乐</a></li>
				</ul>
			</li>
			<li>
				<a href="#">出境游003<span class="trig"></span></a>
				<ul>
					<li><a href="#">游轮112</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境002</a></li>
				</ul>
			</li>
			<li>
				<a href="#">出境游002<span class="trig"></span></a>
				<ul>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">当地玩乐</a></li>
				</ul>
			</li>
			<li>
				<a href="#">出境游003<span class="trig"></span></a>
				<ul>
					<li><a href="#">游轮112</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">出境002</a></li>
				</ul>
			</li>
			<li>
				<a href="#">出境游11<span class="trig"></span></a>
				<ul>
					<li><a href="#">出境首页1</a></li>
					<li><a href="#">游轮111</a></li>
					<li><a href="#">游轮111</a></li>
					<li><a href="#">游轮111</a></li>
					<li><a href="#">游轮111</a></li>
					<li><a href="#">游轮111</a></li>
					<li><a href="#">游轮111</a></li>
					<li><a href="#">出境首页</a></li>
				</ul>
			</li>
			<li>
				<a href="#">出境游002<span class="trig"></span></a>
				<ul>
					<li><a href="#">出境首页</a></li>
					<li><a href="#">当地玩乐</a></li>
					<li><a href="#">当地玩乐</a></li>
					<li><a href="#">当地玩乐</a></li>
					<li><a href="#">当地玩乐</a></li>
				</ul>
			</li>
		</ul>
	</div>
	<div class="second-bg"></div>
</div>

页面的底部，需引入jQuery库，并设置好鼠标悬停等事件的响应，代码如下：

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('.nav-list>li').hover(function(){
		var $ul=$(this).find('ul');
		var oW=$(this).width();//li
		var otrigW=$(this).find('.trig').width();
		var oNavListL=$('.nav-list').offset().left;
		var oTL=$(this).offset().left-oNavListL;//距离最左边的距离
		var oTR=$('.nav-list').width()-oTL-oW;//距离最右边的距离
		console.log(oNavListL+":"+oTL);
		
		if($ul.find('li').length>0){
			$('.second-bg').show();
			$(this).find('.trig').show();
			$ul.show();
			var sum=0;
			var oLeft=0;
			for(var i=0;i<$ul.find('li').length;i++){
				sum+=$ul.find('li').eq(i).width()+4;
			}
			$ul.width(sum);
			oLeft=(sum-oW)/2;
			if(oLeft>oTL){//到达左侧边界
				oLeft=oTL;
				$ul.css('left',-oLeft+'px');
				return ;
			}
			if(oLeft>oTR){
				$ul.css('right',-oTR+'px');
				return ;
			}
			$ul.css('left',-oLeft+'px');
			
		}
	},function(){
		$('.second-bg').hide();
		$(this).find('ul').hide();
		$(this).find('.trig').hide();
	});
});
</script>