CSS 수평 조절 드롭 다운 테두리

Question

마우스를 올리면 내 드롭 다운 메뉴 주위에 테두리가 나타납니다. 상단 메뉴의 오른쪽 및 왼쪽 테두리를 드롭 다운의 테두리에 맞추기를 원합니다. 그리고 나는 톱 메뉴의 텍스트 밑에 경계를보고 싶지 않습니다. 나는 내가 원하는 것을 picture을 포함하여 명확하게 설명하고 있다고 확신하지 못한다.

Here 내 시도 멋진 스타일의

Answer 1

입니다. 이를 구현하려면 CSS가 다음을 수행해야합니다.

탭 (#nav ul li a)은 흰색 배경과 위쪽, 왼쪽 및 오른쪽에 검은 색 테두리가 필요합니다.

드롭 다운에는 흰색 배경과 모든면이 검은 색 테두리가 있어야합니다.

트릭은 z-index을 사용하여 드롭 다운 위에 탭을 놓고 마우스를 올리면 탭의 높이가 약간 높아집니다. 드롭 다운의 상단 테두리 부분을 은폐하기 위해 탭의 아래쪽이 탭 행 아래쪽으로 확장되어야합니다. 말이 돼?

CSS 작성에 대한 도움을 받으려면 질문에 코드를 추가하는 것이 좋습니다.

희망이 도움이됩니다.