GNB Hoverable 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%;
  ul.menuList{display: flex; justify-content: space-between; background-color: rgba($color: #333, $alpha: 0.5);
    a{display: block;}
    >li{position: relative; line-height: 50px; text-align: center; padding: 5px; box-sizing: border-box; min-width: 130px;
      >a{font-size: 24px; font-family: 'Noto Sans'; color: #fff;}
        .depthTwo{display: none; position: absolute; top: 60px; left: 0; z-index: 1000; 
          >li{line-height: 50px; border: 1px solid #ddd; border-top: 0; padding: 5px; box-sizing: border-box; min-width: 130px; background-color: rgba($color: #333, $alpha: 0.8);
            >a{display: block; font-size: 16px; font-family: 'Noto Sans'; color: #fff;}
          }
        }
      }
  }
}

                              
#gnb {
  width: 100%;
}

#gnb ul.menuList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    background-color: rgba(51, 51, 51, 0.5);
}

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

#gnb ul.menuList > li {
  position: relative;
  line-height: 50px;
  text-align: center;
  padding: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 130px;
}

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

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

#gnb ul.menuList > li .depthTwo > li {
  line-height: 50px;
  border: 1px solid #ddd;
  border-top: 0;
  padding: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 130px;
  background-color: rgba(51, 51, 51, 0.8);
}

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

                              
$(function(){
    $('#gnb>ul>li').hover(function(){
        $(this).find('.depthTwo').stop().slideDown();
    },function(){
        $(this).find('.depthTwo').stop().slideUp();
    });
});

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