.gnb>ul>li.depth1:after {
    content: '';
    position: absolute;
    background: #777;
    width: 20%;
    height: 2px;
    left: 50%;
    bottom: 0;
    opacity: 0;
    transition: all linear 0.3s;
}

식으로 현재 css 효과를 준 상태이고

참고 : https://php.quicoto.com/menu-hover-effect-inspiration/

<ul>
    <li class="depth1">
    <a href="/index1" class="selected">Home</a>
    </li>

    <li class="depth1">
    <a href="/notice">고객센터</a>
        <ul class="depth2" style="display: none;">
            <li>
            <a href="/notice">공지사항</a>
            </li>
            <li>
            <a href="/question">Q&A게시판</a>
            </li>
        </ul>
    </li>
</ul>

메뉴는 대략 이런식으로 구현해놨는데

현재 문제는 1차 메뉴에서 나와야 할 효과가

드랍다운 되면서 보이는 2차메뉴 하단에서 보인다는것입니다. 

depth2가 depth1안에 있어서 depth1 하나로 보는것 같은데

이럴 경우 어떻게 depth1 에서만 효과를 낼 수 있을까요?