CodePen Embed - 하위메뉴 일체형

<body>
    <header>
        <div class="clear">
            <h1><a href=""><span class="hide">로고</span></a></h1>
            <nav class="gnb">
                <li>
                    <a href="">WOW텔레콤</a>
                    <div>
                        <div>
                            <ul>
                                <li><a href="">CEO인사말</a></li>
                                <li><a href="">회사소개</a></li>
                                <li>
                                    <a href="">사업소개</a>
                                    <ul>
                                        <li><a href="">통신</a></li>
                                        <li><a href="">미디어</a></li>
                                        <li><a href="">보안</a></li>
                                        <li><a href="">커머스</a></li>
                                        <li><a href="">모빌리티</a></li>
                                        <li><a href="">AI</a></li>
                                    </ul>
                                </li>
                                <li><a href="">연혁</a></li>
                                <li><a href="">브랜드</a></li>
                                <li><a href="">스포츠</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="">사회적 가치</a>
                    <div>
                        <div>
                            <ul>
                                <li><a href="">사회적가치추구</a></li>
                                <li><a href="">사회적가치프로그램</a></li>
                                <li>
                                    <a href="">지속가능경영</a>
                                    <ul>
                                        <li><a href="">책임경영</a></li>
                                        <li><a href="">지속경영 자료실</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">이해관계자 참여</a>
                                    <ul>
                                        <li><a href="">정책</a></li>
                                        <li><a href="">참여 Framework</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="w2">
                    <a href="">투자정보</a>
                    <div>
                        <div>
                            <ul>
                                <li>
                                    <a href="">경영정보</a>
                                    <ul>
                                        <li><a href="">지배구조</a></li>
                                        <li><a href="">주주총회</a></li>
                                        <li><a href="">정관</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">재무정보</a>
                                    <ul>
                                        <li><a href="">재무 하이라이트</a></li>
                                        <li><a href="">신용등급</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="">주식정보</a>
                                    <ul>
                                        <li><a href="">주주현황</a></li>
                                        <li><a href="">주주환원</a></li>
                                        <li><a href="">주가정보</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li>
                                    <a href="">IR자료실</a>
                                    <ul>
                                        <li><a href="">실적발표</a></li>
                                        <li><a href="">Presentation</a></li>
                                        <li><a href="">사업 보고서</a></li>
                                        <li><a href="">통합 보고서</a></li>
                                        <li><a href="">분쟁광물</a></li>
                                        <li><a href="">공시정보</a></li>
                                        <li><a href="">IR자료요청</a></li>
                                        <li><a href="">FAQ</a></li>
                                    </ul>
                                </li>
                                <li><a href="">전자공고</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="">미디어센터</a>
                    <div>
                        <div>
                            <ul>
                                <li><a href="">뉴스</a></li>
                                <li><a href="">광고영상</a></li>
                                <li><a href="">W.hy</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="">인재채용</a>
                    <div>
                        <div>
                            <ul>
                                <li><a href="">채용정보</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </nav>
            <a href="" class="lang" aria-label="영문사이트 바로가기">EN</a>
        </div>
    </header>
    <div class="bg_gnb"></div>
</body>

ul, li{list-style : none}
header {position: relative;}
header > div{width: 1160px; padding: 32px 0 0 0; margin: 0 auto;}
/* header에 바로 이 속성을 주게 되면 아랫선이 브라우저 가로사이즈가 아닌 1160px까지만 그려지게 된다
   자식 요소인 div에 css를 적용해주어 콘텐츠(메뉴)만 너비를 지정해주고 가운데에 위치하도록 한다.
 - padding : 32px 0 0 0; ---> 이것은 가장큰 요소(로고)를 기준으로 패딩값이 잡히는데 위치를 정하는 이유도 있으나,
             코로긔 높이만큼 GNB영역의 클릭 범위를 넓힐 수 있다.
*/
header h1{float: left;}
/* float을 설정하게 되면 부모요소의 높이가 초기화된다. 따라서 부모요소에 clear클래스를 주었다. */
header h1 a{display: block; width: 99px; height: 58px; background:  url(../../../navigation/images/h1_logo3.png) no-repeat center;}
header .lang{float: right;}
header nav{float: left; padding: 0 0 0 43px;}
header nav a{letter-spacing: -0.25px;}
/* 자간 설정 : 포토샵에서 -25 ---> letter-spacing에서 */
header .gnb > li{float: left; position: relative; width: 165px;}
header .gnb > li.w2{width : 219px;} 
/* 메뉴 카테고리마다 너비를 동일하게 주어 통일감은 준다. */
/* 투자정보만 조금 더 길게 너비를 지정해준다. */
header .gnb > li:hover > a{color: #e6233e;}
header .gnb > li:hover > div{background: #fff;}
header .gnb > li > a {display: block; font-size: 16px; color: #222; line-height: 58px; text-align: center;}
/* 인라인 요소인 a에 line-height를 주기 위해 display:block을 지정한다. */
header .gnb > li > div{display: none; position: absolute; left: 0; z-index: 3; width: 100%; padding: 16px 20px; box-sizing: border-box; border-left: 1px solid #d7d7d7;} 
header .gnb > li:last-child > div{border-right: 1px solid #d7d7d7;}
header .gnb > li > div > div > ul > a {display: block;}
header .gnb > li > div > div > ul > li{line-height: 40px;}
header .gnb > li > div > div > ul > li > a{font-size: 15px; color: #222;}
header .gnb > li > div > div > ul > li > ul{padding: 0 0 8px;}
header .gnb > li > div > div > ul > li > ul > li{line-height: 26px;}
header .gnb > li > div > div > ul > li > ul > li a{font-size: 13px; color: #6a6a6a;}
header .gnb > li.w2 > div > div{float: left; width: 50%;}
/* 하위메뉴가 2개 열로 디자인한 부분 */
.bg_gnb{display: none; position: absolute; left: 0; right: 0; top: 90px; z-index: 2; background: #ececec; border-top: 1px solid #d7d7d7;}
.bg_gnb::after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid #d7d7d7;}
.ie9 header:after{background: #e94e66;}

$(document).ready(function(){
  var gnbdiv = $('.gnb > li > div');
  var bg = $('.bg_gnb');
  var li = $('.gnb > li');

  li.on('mouseover focusin', function(){
    hig = 0;
    gnbdiv.each(function(){
      temp = parseInt($(this).outerHeight());
      if(hig <= temp){
        hig = temp;
      }
    });
    gnbdiv.show().css('height',hig);
    bg.show().css('height',hig);

  });

  li.on('mouseleave', function(){
    hide_el();
  });
  $('.lang, h1').on('focusin', function(){
    hide_el();
  });

  function hide_el(){
    gnbdiv.hide().removeAttr('style');
    bg.hide().removeAttr('style');
  }
})

This Pen is owned by yyyhhh on CodePen.

See more by @yyyhhh on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js