jQuery水平滑動導航欄

html代碼

<div class="header">
			<ul class="menu">
				<li class="first">
					<a href="index.html" target="_self">首&nbsp;&nbsp;頁</a>
					<dl class="li_1_content">
						<dt></dt>
					</dl>
				</li>
				<li class="current">
					<a href="robe.html" target="_self">婚紗禮服</a>
					<dl class="li_1_content">
						<dt></dt>
					</dl>
				</li>
				<li>
					<a href="hotel.html" target="_self">婚宴酒店</a>
					<dl class="li_1_content">
						<dt></dt>
					</dl>
				</li>
				<li>
					<a href="WeddingPhotography.html" target="_self">婚紗攝影</a>
					<dl class="li_1_content">
						<dt></dt>
					</dl>
				</li>
				<li>
					<a href="CaseWedding.html" target="_self">婚禮案例</a>
					<dl class="li_1_content">
						<dt></dt>
					</dl>
				</li>
				<li class="li_3">
					<a class="noclick" href="marriageStrategy.html" target="_blank">結婚攻略
						<i class="i_icon i_sel"></i></a>
					<dl class="li_3_content">
						<dt></dt>
						<dd class="lastItem">
							<a href="marriageStrategy.html" target="_blank"><span>採購清單</span></a>
						</dd>
						<dd class="lastItem">
							<a href="javascript:;" target="_blank"><span>新娘說</span></a>
						</dd>
						<dd>
							<a href="javascript:;" target="_blank"><span>問答</span></a>
						</dd>
					</dl>
				</li>
				<li>
					<a href="#" target="_self">請柬設計</a>
					<dl class="li_1_content">
						<dt></dt>
					</dl>
				</li>
				<li class="li_3">
					<a class="noclick" href="javascript:;" target="_blank">婚禮美圖
						<i class="i_icon i_sel"></i></a>
					<dl class="li_3_content">
						<dt></dt>
						<dd>
							<a href="javascript:;" target="_blank"><span>婚禮視頻</span></a>
						</dd>
						<dd>
							<a href="javascript:;" target="_blank"><span>婚禮美圖</span></a>
						</dd>
					</dl>
				</li>
				
				<li class="li_3">
					<a class="noclick" href="javascript:;" target="_blank">更多精彩
						<i class="i_icon i_sel"></i></a>
					<dl class="li_3_content">
						<dt></dt>
						<dd>
							<a href="javascript:;" target="_blank"><span>婚禮跟妝</span></a>
						</dd>
						<dd>
							<a href="javascript:;" target="_blank"><span>精美婚戒</span></a>
						</dd>
						<dd>
							<a href="javascript:;" target="_blank"><span>婚禮策劃</span></a>
						</dd>
						<dd class="lastItem">
							<a href="javascript:;" target="_blank"><span>結婚商場</span></a>
						</dd>
						<dd class="lastItem">
							<a href="javascript:;" target="_blank"><span>婚車租賃</span></a>
						</dd>
					</dl>
				</li>
			</ul>
		</div>

css代碼

i {
	font-style: italic;
}
.i_icon {
	
	margin-top: 8px;
	margin-right: 0px;
	width: 20px;
	height: 20px;
}
.header {
	position: relative;
	height: 60px;
	/*background: url(img/line-solid.gif) repeat-x bottom;*/
	z-index: 100;
	line-height: 60px;
	position: relative;
	margin: 0 auto;
}

.menu {
	height: 60px;
	/*background: url(img/menu_bg.png) no-repeat -99px bottom;*/
	z-index: 100;
	background-position: 2% 100%;
	background-size: 6% 20px;
	position: absolute;
	width: 80%;
	line-height: 0px;
	right: 12%;
	left: 12%;
}

.menu li {
	height: 60px;
	float: left;
	text-align: center;
	padding: 0;
	width: 10%;
	font-size: 18px;
	font-family: "宋體";
	line-height: 60px;
	position: relative;
	z-index: 100;
}

.menu li.lihover,
.menu li.licurrent {
	padding-bottom: 15px;
	border-bottom: 3px solid #d4237a;
}

.menu li a {
	color: #242424;
	margin: 0;
	border-left: none;
	display: inline-block;
	font-size: 18px;
	width: 100%;
	text-decoration: none;
}

.menu li a.noborder {
	border-right: none;
}

.current .li_1_content {
	display: block;
}

.menu .current a {
	color: #d4237a;
}

.li_1_content {
	display: none;
	position: absolute;
	top: 20px;
	left: 0px;
	line-height: 40px;
	z-index: 99;
	height: 188px;
	*top: 18px;
	width: 100%;
}

.li_1_content dt {
	height: 17px;
	border-bottom: 3px solid #d4237a;
	*height: 19px;
	line-height: 17px;
}

.li_3 a.noclick {
	width: 100%;
}

.li_3_content {
	position: absolute;
	top: 20px;
	left: 0px;
	line-height: 40px;
	z-index: 999;
	display: none;
	*top: 18px;
	width: 100%;
	background: #fff;
}

.li_3_content a:hover {
	color: #d4237a !important;
}

.li_3_content dt {
	height: 17px;
	border-bottom: 3px solid #d4237a;
	*height: 19px;
	line-height: 17px;
}

.li_3_content dd {
	width: 98%;
	border-left: 1px solid #E6E4E3;
	border-right: 1px solid #E6E4E3;
	padding: 0 1%;
	margin: 0;
}

.li_3_content dd a {
	text-align: center;
	padding: 0;
	border-right: none;
	color: #666;
	font-weight: normal;
	width: auto;
}

.i_sel {
	position: absolute;
	float: right;
	margin-top: 20px;
	background-position: 10px -90px;
	background: url(img/i_top.png) no-repeat;
}

jQuery代碼

/*導航*/
	function nva(){
		var $menu = $(".menu"),
			$menuLi = $menu.find("li"),
			$current = $menu.find('.current');
		$menuLi.hover(function() {
			var $this = $(this),
				num = $menuLi.index($this);
			if($(this).index() != 0) {
				$current.find(".li_1_content").css("display", "none");
				$current.children("a").css("color", "#000");
			}
			$(this).find(".li_1_content").stop(true, true).fadeIn(0);
			$(this).children("a").css("color", "#d4237a");
		}, function() {
			if($(this).index() != 0) {
				$(this).find(".li_1_content").fadeOut(500, function() {
					$(this).find(".li_1_content").css("display", "none");
				});
				$(this).children("a").css("color", "#000");
			}
			$current.find(".li_1_content").css("display", "block");
			$current.children("a").css("color", "#d4237a");

		});
	}


	function nav() {
		var $menu = $(".menu"),
			$menuLi = $menu.find("li"),
			$current = $menu.find('.current'),
			$li_3 = $menu.find('li.li_3'),
			$li_3_content = $li_3.find('.li_3_content'),
			$hoverdd = $li_3_content.find("dd");
		$li_3.hover(function() {
			$(this).children("a").children("i").css("background", "url(css/img/i_bottom.png) no-repeat");
			$(this).find(".li_3_content").stop(true, true).fadeIn(0);
		}, function() {
			$(this).children("a").children("i").css("background", "url(css/img/i_top.png) no-repeat");
			$(this).find(".li_3_content").fadeOut(500, function() {
				$(this).find(".li_3_content").css("display", "none");
			});
		});
		/*二級標題*/
		$hoverdd.hover(function() {
			var $this = $(this).children("a"),
				$ddtext = $this.children("span");
			$(this).addClass("currbg");
			$ddtext.css("color", "#FFFFFF");
		}, function() {
			$(this).removeClass("currbg");
			$(this).children("a").children("span").css("color", "#000");
		})

		$("a.noclick").click(function(event) {
			event.preventDefault();
		});
	}
	

學藝不精此Demo僅供參考…