메뉴에 hover 했을 때 밑줄효과 유지하는 방법이요!

네비게이션바 연습중입니다.

메인 메뉴에 hover했을 때 밑줄 나오게하는 거 까지 했어요.

서브메뉴가 펼쳐져있는 상태에서 밑줄이 고정됐으면 좋겠는데

어떻게 해야할지를 모르겠어요.

<div class="gnb-outer">
        <nav>
          <ul class="gnb">
            <li>
              <a href="#none"></a>
              <div class="dropdown">
                <a href="#none"></a>
                <a href="#none"></a>
              </div>
            </li>
            <li>
              <a href="#none"></a>
            </li>
            <li>
              <a href="#none"></a>
            </li>
            <li>
              <a href="#none"></a>
            </li>
            <li>
              <a href="#none"></a>
              <div class="dropdown">
                <a href="#none">Q&A</a>
                <a href="#none">FAQ</a>
              </div>
            </li>
            <li>
              <a href="#none"></a>
              <div class="dropdown">
                <a href="#none"></a>
                <a href="#none"></a>
                <a href="#none"></a>
                <a href="#none"></a>
                <a href="#none"></a>
              </div>
            </li>
          </ul>
        </nav>
      </div>.gnb li > a::after {
  content: " ";
  display: block;
  margin-top: 5px;
  width: 100%;
  border-bottom: 3px solid #146ebc;
  transform: scaleX(0);
  transition: 0.8s;
}
.gnb li > a:hover::after{
  transform: scaleX(1);

.gnb li > a::after {
  content: " ";
  display: block;
  margin-top: 5px;
  width: 100%;
  border-bottom: 3px solid #146ebc;
  transform: scaleX(0);
  transition: 0.8s;
}
.gnb li > a:hover::after{
  transform: scaleX(1);

코드는 이렇게 짠 상태입니다.