[jQuery] Depth gnb 네비게이션

$(function(){
	var $header = $('#header'),
		$gnb = $('ul.gnb'),
		$gnbLi = $gnb.find(' > li'),
		$gnb2Dep = $gnbLi.find('.depth2')

	$gnbLi.on({
	  "mouseenter focusin" : function(){
		 $gnb2Dep.addClass("on");
		 $(this).addClass('on').find($gnb2Dep).stop().slideDown(200);
	  },
	  "mouseleave focusout" : function(){
		 $gnb2Dep.removeClass("on");
		 $(this).removeClass('on').find($gnb2Dep).stop().slideUp(200);
	  }
	});
});

	

		

			

				메뉴1
				

					내용입니다용
				
			
			

				메뉴2
				

					내용입니다용2
				
			
			

				메뉴3
				

					내용입니다용3
				
			
			

				메뉴4
				

					내용입니다용4
				
			
		
	

#header{width:100%;height:90px;border-bottom:1px solid #ccc;}
#header .inner{width:1000px;height:90px;margin:0 auto;}
#header .inner ul.gnb{line-height:90px;position:relative;}
#header .inner li{display:inline-block;}
#header .inner li .depth2{display:none;position:absolute;background:red;width:100%;height:300px;left:0;}

• 메뉴1
  내용입니다용
• 메뉴2
  내용입니다용2
• 메뉴3
  내용입니다용3
• 메뉴4
  내용입니다용4