CSS만 사용하여 위쪽으로 열리는 드롭다운 메뉴를 어떻게 만들 수 있나요?

Pure CSS로 위쪽으로 열리는 드롭다운 메뉴

Pure CSS를 사용하면 강력하고 시각적으로 매력적인 드롭다운 메뉴를 만들 수 있습니다. 이 튜토리얼에서는 일반적인 아래쪽 열기 대신 "위쪽" 드롭다운 메뉴를 만드는 단계를 안내합니다.

처음에는 순수한 CSS 드롭다운을 설정했습니다. 아래쪽으로 열리는 것을 제외하고는 귀하의 요구 사항을 충족하는 메뉴입니다. 우리의 목표는 메뉴가 위쪽으로 열리도록 코드를 수정하여 "드롭업" 메뉴가 되는 것입니다.

이렇게 위쪽으로 열리려면 CSS 규칙을 약간 수정해야 합니다.

해결책 1: 위치 조정

드롭다운 메뉴의 하위 메뉴 위치를 지정하는 CSS 규칙에서 하단: 100% 속성을 추가합니다. 그러면 기본적으로 하위 메뉴가 하위 메뉴 항목 아래가 아닌 상위 메뉴 항목 위로 이동됩니다.

#menu:hover ul li:hover ul {
  position: absolute;
  margin-top: 1px;
  font: 10px;
  bottom: 100%;
}

해결책 2: 특정 하위 메뉴 대상

위쪽 열기 효과가 모든 항목에 적용되는 것을 방지하려는 경우 하위 메뉴에서는 보다 타겟팅된 CSS 규칙을 사용할 수 있습니다. 이 경우 최상위 메뉴 항목의 하위 메뉴만 대상으로 지정하도록 규칙을 수정합니다.

#menu>ul>li:hover>ul {
  bottom: 100%;
}

해결책 3: 메뉴 테두리 유지

하위 메뉴 위치 조정이 하위 메뉴 항목에 영향을 미치는 경우 시각적 모양을 변경하려면 border-bottom 속성을 추가하여 원하는 모양을 유지할 수 있습니다.

#menu>ul>li:hover>ul {
  bottom: 100%;
  border-bottom: 1px solid transparent;
}

다음 중 하나를 구현하면 됩니다. 솔루션을 사용하면 순수한 CSS를 사용하여 원하는 "드롭업" 메뉴를 얻을 수 있습니다. http://jsfiddle.net/W5FWW/4/에서 라이브 데모를 찾을 수 있습니다.

위 내용은 CSS만 사용하여 위쪽으로 열리는 드롭다운 메뉴를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!