GNB(서브페이지 메뉴고정)

		
	<div class="header">
		<ul id="gnb">
			<li class="gnb1"><a href="#"><span>첫번째</span></a>
				<ul class="sub1">
					<li><a href="#">첫번째-1</a></li>
					<li><a href="#">첫번째-2</a></li>
				</ul>
			</li>
			<li class="gnb2"><a href="#"><span>두번째</span></a>
				<ul class="sub2">
					<li><a href="#">두번째-1</a></li>
					<li><a href="#">두번째-2</a></li>
					<li><a href="#">두번째-3</a></li>
				</ul>
			</li>
			<li class="gnb3"><a href="#"><span>세번째</span></a></li>
			<li class="gnb4"><a href="#"><span>네번째</span></a>
				<ul class="sub4">
					<li><a href="#">네번째-1</a></li>
					<li><a href="#">네번째-2</a></li>
					<li><a href="#">네번째-3</a></li>
					<li><a href="#">네번째-4</a></li>
				</ul>
			</li>
			<li class="gnb5"><a href="#"><span>다섯번째</span></a>
				<ul class="sub5">
					<li><a href="#">다섯번째-1</a></li>
					<li><a href="#">다섯번째-2</a></li>
					<li><a href="#">다섯번째-3</a></li>
					<li><a href="#">다섯번째-4</a></li>
					<li><a href="#">다섯번째-5</a></li>
				</ul>
			</li>
		</ul>
	</div>

		

		* {margin:0; padding:0;}
		img {border:0 none;}
		ul, ol {list-style:none;}
		body {font:12px/1.5em NG, AppleGothic,'돋움', Dotum, '굴림', gulim, Arial, Verdana, sans-serif; color:#333;}
		.header {border-top:4px solid #369; border-bottom:1px solid #ccc;}
		.header ul:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
		.header ul {position:relative; margin:0 auto; width:960px; height:43px;}
		.header li {float:left;}
		.header li a {display:block; height:43px;
			background:url('../images/gnb/opinion_navi.gif') no-repeat 0 0;
		}
		.header .show {display:block !important;}
		.header li.gnb1 a {width:91px; background-position:0 0;}
		.header li.gnb1 a.selected {background-position:0 -43px;}
		.header li.gnb2 a {width:77px; background-position:-91px 0;}
		.header li.gnb2 a.selected {background-position:-91px -43px;}
		.header li.gnb3 a {width:63px; background-position:-168px 0;}
		.header li.gnb3 a.selected {background-position:-168px -43px;}
		.header li.gnb4 a {width:64px; background-position:-231px 0;}
		.header li.gnb4 a.selected {background-position:-231px -43px;}
		.header li.gnb5 a {width:93px; background-position:-295px 0;}
		.header li.gnb5 a.selected {background-position:-295px -43px;}

		.header li a span {position:relative; z-index:-1;}
		.header li ul {position:absolute; top:43px; width:auto; height:auto;}
		.header li li {border:0 none; background-color:#666;}
		.header li li a {height:auto; display:block; border:1px solid #333; padding:2px; background:none; white-space:nowrap; text-decoration:none; color:#fff;}
		.header li li a:hover,
		.header li li a:focus,
		.header li li a:active {text-decoration:underline;}
		.header li li.on a {font-weight:bold;}
		.header li ul.sub1 {}
		.header li ul.sub2 {}
		.header li ul.sub3 {}
		.header li ul.sub4 {}
		.header li ul.sub5 {}
		

$(function(){
	$.fn.gnb = function(tar, sub)
	{
		return this.each(function(){
		//return start
			var $gnb = $(this),
				 $tar = parseInt(tar-1),
				 $sub = parseInt(sub-1),
				 $ul = $('li>ul', $gnb),
				 $li = $('>li', $gnb),
				 $a = $('>li>a', $gnb)
			;

			$ul.hide();
			function gnbSet()
			{
				$ul.not($ul.eq($tar)).hide();
				$ul.eq($tar).stop(true,true).slideDown('fast');
				$a.not($a.eq($tar)).removeClass('selected');
				$a.eq($tar).addClass('selected');
				$ul.eq($tar).find('>li').eq($sub).addClass('on');
			}

			gnbSet();

			$a.on('mouseenter focusin', function(){
				if( $(this).hasClass('selected') ) return;
				$a.removeClass('selected');
				$(this).addClass('selected');
				$ul.hide();
				$(this).next('ul').stop().slideDown('fast');
			});

			$gnb.on('mouseleave', function(){
				gnbSet();
			});

		//rerurn end
		});
	};
	$('#gnb').gnb(2,2);//고정될 부분
});