[uiux codepen]2depthGnb(마우스호버시 하위메뉴 열리기)

See the Pen Untitled by kaia (@kaiaakim) on CodePen.

<div class="wrap">
  <header>
    <div class="innerHeader">
      <h1 class="logo">LOGO</h1>
      <nav>
        <ul class="gnb">
          <li>
            <a href="#">A</a>
            <ul class="inner">
              <li><a href="#">A-1</a></li>
              <li><a href="#">A-2</a></li>
              <li><a href="#">A-3</a></li>
              <li><a href="#">A-4</a></li>
            </ul>
          </li>
          <li>
            <a href="#">B</a>
            <ul class="inner">
              <li><a href="#">B-1</a></li>
              <li><a href="#">B-2</a></li>
              <li><a href="#">B-3</a></li>
              <li><a href="#">B-4</a></li>
            </ul>
          </li>
          <li>
            <a href="#">C</a>
            <ul class="inner">
              <li><a href="#">C-1</a></li>
              <li><a href="#">C-2</a></li>
              <li><a href="#">C-3</a></li>
              <li><a href="#">C-4</a></li>
            </ul>
          </li>
          <li>
            <a href="#">D</a>
            <ul class="inner">
              <li><a href="#">D-1</a></li>
              <li><a href="#">D-2</a></li>
              <li><a href="#">D-3</a></li>
              <li><a href="#">D-4</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </header>
</div>

*{
  padding: 0; margin: 0;
}
body{
  font-size: 16px; color: #333;
  background: #ccc;
}
a{
  text-decoration: none; color: inherit;
}
li{
  list-style: none;
}
.wrap{
  width: 100%; 
  /* overflow: hidden; */
  position: relative;
}
header{
  width: 100%; z-index: 200;
  background: #000;
}
.innerHeader{
  width: 1400px; height: 100px; margin: 0 auto;
}
.logo{
  width: 180px;
  float: left; text-align: center;
  margin-top: 26px;
  color: #fff;
}
.gnb{
  float: right; margin-top: 33px; text-align: center;
}
.gnb > li{
  width: 160px; height: 40px;
  position: relative;
  line-height: 40px;
  float: left;
}
.gnb > li > a{
  width: 100%; height: 100%;
  font-weight: bold; color: #fff;
  display: block;
}
.gnb > li > a:hover, .gnb > li > a:focus{
  color: rgb(255, 236, 127);
  background: #fff;
}
.gnb > li > ul.inner{
  width: 160px;
  position: absolute; left: 0; top: 40px;
  line-height: 0px; opacity: 0;
  /* 슬라이드 되어야해서 영역 축소화하기위해 line-height: 0px; opacity: 0;*/
  transition: all 0.5s; font-size: 15px;
  background: #fff;
}
/* on */
.gnb > li > ul.inner.on{
  line-height: 40px; opacity: 1;
  /* on상태일때 서브하위메뉴 보이기 위한 설정;*/
}
.gnb > li > ul.inner a{
  width: 100%; height: 100%;
  display: block;
}
.gnb > li > ul.inner a:hover, .gnb > li > ul.inner a:focus{
  color: #fff;
  background: #ddd;
}

$(function(){
  $(".gnb > li > a").mouseover(function(){
    $(".gnb .inner").removeClass("on");
    $(this).next(".inner").addClass("on");
  });
  $("header").mouseleave(function(){ //하위메뉴에 마우스 떠났을때 on클래스 지우기
    $(".gnb .inner").removeClass("on");
  });
});