탐색 모음의 CSS 하단 테두리

Question

내비게이션 바가 있고 목록의 항목을 마우스로 가리키면 하단에 빨간색 선이 추가되었지만 해당 빨간색 선을 제목(예: "서비스") 아래로 이동하고 싶은데 어떻게 해야 할까요?

HTML과 CSS 코드를 쉽게 검사할 수 있도록 코드펜에 작은 예제를 추가했습니다

으아악 으아악

코드 보기 링크

Answer 1

모든 목록 요소에 헤더와 동일한 높이를 부여하는 것이 좋을 것 같습니다.

이렇게:-

으아악 으아악

Answer 2

헤더 높이를 수정할 수 있으며 탐색 모음 항목의 높이도 수정할 수 있습니다. 또한 마우스를 올리면 li 요소가 움직이는 문제가 있습니다. 요소의 전체 높이가 마우스 오버 시 변경되지 않도록 항상 요소에 투명한 색상 테두리를 추가하여 이 문제를 해결할 수도 있습니다.

이것은 CSS로 수정되었습니다

으아악

https://codepen.io/swarajgk/pen/JjZewPo?editors=1100