메뉴를 열고 닫는 드롭다운의 배치와 상태를 이해합니다.
드롭다운 패널은 기준 요소를 relative로 두고 absolute로 배치합니다. 실제 서비스에서는 hover뿐 아니라 클릭, 키보드, aria-expanded 상태를 JavaScript와 함께 지원해야 합니다.
이번 예제의 출발점은 .menu { position: absolute; inset-block-start: 100%; }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 Tab으로 버튼에 포커스하고 메뉴가 유지되는지 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
hover만으로 열리게 하면 터치·키보드 사용이 불안정합니다. focus와 클릭 동작도 설계하세요.
직접 바꿔보세요Tab으로 버튼에 포커스하고 메뉴가 유지되는지 확인하세요.