메뉴호버시 서브메뉴(dropdown) 구현

gnb메뉴에 호버 시 서브메뉴(dropdown) 구현하는 방법에 대해 정리해보았다.

 

⭐ 중요 포인트

서브메뉴 리스트( = ul.sub_menu )는 gnb메뉴( = li.gnb_menu ) 안에 배치 하며 기존에 서브메뉴는 opacity: 0; visibility: hidden; 상태이다가 gnb_menu:hover 시 opacity: 1; visibility: visible; 상태로 변경되면 된다.

Html

<header>
      <nav>
        <ul class="gnb">
          <li>
            <a href="/menuone.html"><span>MenuOne</span></a>
          </li>
          <li class="gnb_menu">
            <a href="/menuthree.html"><span>MenuTwo</span></a>
            <ul class="sub_menu">
              <li>
                <a href="/submenu1.html">submenu1</a>
              </li>
              <li><a href="/submenu2.html">submenu2</a></li>
              <li><a href="/submenu3.html">submenu3</a></li>
            </ul>
          </li>
          <li class="gnb_menu">
            <a href="/menuthree.html"><span>MenuThree</span></a>
            <ul class="sub_menu">
              <li>
                <a href="/submenu1.html">submenu1</a>
              </li>
              <li><a href="/submenu2.html">submenu2</a></li>
              <li><a href="/submenu3.html">submenu3</a></li>
              <li><a href="/submenu4.html">submenu4</a></li>
            </ul>
          </li>
        </ul>
      </nav>
</header>

 

Css

<style>
      header {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 20;
        background-color: #a09c9c;
      }

      header > nav {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 1600px;
        padding: 25px 40px;
        margin: 0 auto;
      }

      .gnb {
        display: flex;
        gap: 4px;
      }

      .gnb > li {
        position: relative;
      }

      .gnb > li > a {
        padding: 0 20px;
        display: inline-block;
        position: relative;
        height: 40px;
        line-height: 40px;
      }

      .gnb > li > a span {
        display: inline-block;
        position: relative;
        height: 40px;
        line-height: 40px;
        font-weight: 600;
        font-size: 1.6rem;
        color: var(--white-color);
      }

      .gnb > li > a span::before {
        content: "";
        width: 100%;
        height: 2px;
        position: absolute;
        left: 0;
        bottom: 0;
        background: var(--white-color);
        transition: 0.5s transform ease;
        transform: scale3d(0, 1, 1);
        transform-origin: 0 50%;
      }

      .gnb > li > a:hover span::before {
        transform: scale3d(1, 1, 1);
      }

      .gnb > li > a span::before {
        transform-origin: 50% 50%;
        background: var(--brand-color);
      }

      /* sub_menu */
      .sub_menu {
        position: absolute;
        top: 100%;
        width: 100%;
        background-color: var(--black-color);
        opacity: 0;
        visibility: hidden;
        transition: 0.3s all ease;
      }

      .sub_menu li a {
        display: block;
        padding: 10px 16px;
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--white-color);
      }

      .sub_menu li a:hover {
        background-color: #696868;
      }

      .gnb_menu:hover .sub_menu {
        opacity: 1;
        visibility: visible;
      }
</style>

 

 

메뉴 호버 시 효과 모음

아래 링크를 통해 다양한 효과를 적용 할 수 있다.

CSS Menu hover effects

 

 

결과