메뉴를 열고 닫는 드롭다운의 배치와 상태를 이해합니다.
드롭다운 패널은 기준 요소를 relative로 두고 absolute로 배치합니다. 실제 서비스에서는 hover뿐 아니라 클릭, 키보드, aria-expanded 상태를 JavaScript와 함께 지원해야 합니다.
평소 display: none으로 숨은 .menu는 .dropdown에 마우스가 올라가거나 안쪽 버튼이 포커스를 받으면 :hover와 :focus-within 규칙에 걸려 나타납니다. top: 100%와 left: 0이 패널을 relative 기준인 .dropdown 바로 아래에 틈 없이 붙이므로, 마우스를 버튼에서 메뉴로 옮기는 동안에도 hover가 끊기지 않습니다. 패널은 절대 위치라 열려도 아래 내용을 밀어내지 않습니다.
절대 위치 패널도 overflow: hidden이 걸린 조상 안에 있으면 그 경계에서 잘려 나갑니다. HTML의 popover 속성으로 띄운 패널은 최상위 레이어에 그려져 이런 잘림과 z-index 경쟁을 피하고, 바깥을 클릭하거나 Esc 키를 누르면 닫히는 동작도 브라우저가 처리합니다.
hover만으로 열리게 하면 터치·키보드 사용이 불안정합니다. focus와 클릭 동작도 설계하세요.
직접 바꿔보세요Tab으로 버튼에 포커스하고 메뉴가 유지되는지 확인하세요.