GNB Menu Hover Full Dropdown

                              
<div id="wrap">
  <div id="gnb">
    <div id="menuBg"></div>
    <ul class="menuList">
        <li>
            <a href="#none" title="메뉴01">메뉴 01</a>
            <ul class="depthTwo">
                <li>
                    <a href="#" title="서브메뉴 01">서브메뉴 01</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 02">서브메뉴 02</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 03">서브메뉴 03</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 04">서브메뉴 04</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 05">서브메뉴 05</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#none" title="메뉴02">메뉴 02</a>
            <ul class="depthTwo">
                <li>
                    <a href="#" title="서브메뉴 01">서브메뉴 01</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 02">서브메뉴 02</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 03">서브메뉴 03</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 04">서브메뉴 04</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#none" title="메뉴03">메뉴 03</a>
            <ul class="depthTwo">
                <li>
                    <a href="#" title="서브메뉴 01">서브메뉴 01</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 02">서브메뉴 02</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 03">서브메뉴 03</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#none" title="메뉴04">메뉴 04</a>
            <ul class="depthTwo">
                <li>
                    <a href="#" title="서브메뉴 01">서브메뉴 01</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 02">서브메뉴 02</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 03">서브메뉴 03</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 04">서브메뉴 04</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#none" title="메뉴05">메뉴 05</a>
            <ul class="depthTwo">
                <li>
                    <a href="#" title="서브메뉴 01">서브메뉴 01</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 02">서브메뉴 02</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 03">서브메뉴 03</a>
                </li>
                <li>
                    <a href="#" title="서브메뉴 04">서브메뉴 04</a>
                </li>
            </ul>
        </li>
    </ul>
  </div>
</div>

                              
#gnb{width: 100%;
  #menuBg{display: none; position: absolute; left: 0; top: 120px; width: 100%; height:365px; border-top: 1px solid #ddd;
  box-shadow:-3px 3px 3px 0 rgba(0, 0, 0, 0.2); background-color: #fff; z-index: 1000;}
  ul.menuList{display: flex; justify-content: space-between;
    a{display: block;}
    >li{position: relative; line-height: 50px; text-align: center;
      >a{min-width: 80px; font-size: 24px; font-family: 'Noto Sans'; color: #000;}
        .depthTwo{display: none; position: absolute; top: 80px; z-index: 1000; 
          >li{line-height: 50px;
            >a{display: block; font-size: 16px; font-family: 'Noto Sans'; color: #444;}
          }
        }
      }
  }
}

                              
#gnb {
  width: 100%;
}

#gnb #menuBg {
  display: none;
  position: absolute;
  left: 0;
  top: 120px;
  width: 100%;
  height: 365px;
  border-top: 1px solid #ddd;
  -webkit-box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.2);
          box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.2);
  background-color: #fff;
  z-index: 1000;
}

#gnb ul.menuList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#gnb ul.menuList a {
  display: block;
}

#gnb ul.menuList > li {
  position: relative;
  line-height: 50px;
  text-align: center;
}

#gnb ul.menuList > li > a {
  min-width: 80px;
  font-size: 24px;
  font-family: 'Noto Sans';
  color: #000;
}

#gnb ul.menuList > li .depthTwo {
  display: none;
  position: absolute;
  top: 80px;
  z-index: 1000;
}

#gnb ul.menuList > li .depthTwo > li {
  line-height: 50px;
}

#gnb ul.menuList > li .depthTwo > li > a {
  display: block;
  font-size: 16px;
  font-family: 'Noto Sans';
  color: #444;
}

                              
$(document).ready(function(){
  $('#gnb').on({
    "mouseleave":function (){
      $('#menuBg,.depthTwo').stop().slideUp();
    }
  });
});

Esc 혹은 우측 상단 X 버튼을 눌러 결과창을 닫을 수 있습니다.