mega menu, full wide dropdown menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
header nav {position: relative;}
header nav .lnb {width:100%;margin:0 auto;text-align: center;position:relative;z-index: 9999l}
header nav .lnb ul.depth1 {width:100%;max-width:1200px;margin:0 auto;;border:1px solid #cecece;}
header nav .lnb ul li {display:inline-block;text-align: center;width:19%;vertical-align: top;}
header nav .lnb ul li a {display:block;font-size:18px;font-weight:bold;color:#202020;padding:15px 0;}
header nav .sub_menu {background-image: linear-gradient(to right, #ffd354 40%, #fff 60%);;width:100%;border-bottom:1px solid #ff4f02;position:absolute;z-index:1;left:0;display:none;}
header nav .sub_menu .inner_wrap {width:100%;max-width:1200px;margin:0 auto;font-size:0;}
header nav .sub_menu .sub_menu_tit {display:inline-block;width:100%;max-width:360px;}
header nav .sub_menu h2.tit {font-size:29px;color:#000;padding:60px 0 25px 0px;margin:0 0 0 10px;border-bottom:1px solid #ff4f02;display: inline-block;}
header nav .sub_menu p.exp {font-size:15px;color:#505050;padding:25px 0 47px 10px ;background:url(src/img/main/nav_bg.png) 250px top no-repeat;letter-spacing:-1px;}
header nav .depth2 {display: inline-block;background:#fff;vertical-align: top;padding:25px 0 25px 25px;width:100%;max-width:800px;min-height:212px;}
header nav .depth2 li {width:260px;display: inline-block;}
header nav .depth2 li a {display:block;color:#ff4f02;padding:15px;font-size:15px;font-weight: bold;background:url(src/img/main/sub_arrow.png) 95% 20px no-repeat #f4f4f4;margin:0 15px 10px 0;}
@media (max-width:1200px){
header nav .sub_menu .sub_menu_tit {margin:0 0 0 25px;}
header nav .sub_menu {background:#ffd354;}
header nav .depth2 {max-width:calc(100% - 50px);padding:25px;}
header nav .depth2 li {width: 24.5%;display: inline-block;}
}
</style>
<script>
$(function(){
var depth1_list = $(".lnb .depth1 li");
var overArea = $(".sub_menu");
depth1_list.mouseover(function(){
var idx = depth1_list.index(this)+1;
//console.log(idx + "클릭");
$(".sub_menu").hide();
$(".sub_"+idx).slideDown();
//console.log(idx+"서브출력");
});
overArea.mouseleave(function(){
$(".sub_menu").slideUp();
});
});
</script>
<div id="wrap">
<header>
<nav>
<div class="lnb">
<ul class="depth1">
<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>
<!--//depth2-->
</div>
<!--//lnb-->
<div class="sub_menu sub_1">
<div class="inner_wrap">
<div class="sub_menu_tit">
<h2 class="tit">메뉴1</h2>
<p class="exp">txt</p>
</div>
<!--//sub_menu_tit-->
<ul class="depth2">
<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>
<li><a href="#">서브6</a></li>
<li><a href="#">서브7</a></li>
</ul>
<!--//depth2-->
</div>
<!--//inner_wrap-->
</div>
<!--//sub_menu-->
<div class="sub_menu sub_2">
<div class="inner_wrap">
<div class="sub_menu_tit">
<h2 class="tit">메뉴2</h2>
<p class="exp">홈페이지~</p>
</div>
<!--//sub_menu_tit-->
<ul class="depth2">
<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>
<li><a href="#">서브6</a></li>
<li><a href="#">서브7</a></li>
</ul>
<!--//depth2-->
</div>
<!--//inner_wrap-->
</div>
<!--//sub_menu-->
</nav>
<!--//nav-->
</header>
<!--//header-->
</div>
<!--//wrap-->
</body>
</html>
1. 1뎁스 메뉴 인덱스 체크 후 서브메뉴 출력 방식