gnb hover 시에 하위 depth항목들 위치 조정

항상 메인페이지를 코딩할때마다 갖는 고민이다. 

gnb 항목에  에 hover를 할 때, depth n 항목들을 보이게 하는 효과에서, 

.gnb-li{ position:relative;}

.gnb-li.is-li01 .gnb__depth1{ position:absolute; top:N; left::N; width: N;}

등으로 일일히 width값과 left값을 부여하는 방법을 쓰는데 다른 좋은 방법은 없을까.

일일히 직접 재는 것도 비효율적이라고 생각하지만, 유지보수 시에 좋은 코드라고 생각치 않기때문이다. 만일 depth1항목에 몇 글자 추가되거나 항목이 더 들어간다면 또 일일히 width값과 left값을 수정해줘야하기 때문이다.