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

순수한 CSS로 위로 열리는 드롭다운 메뉴

단순한 사용으로 드롭다운 메뉴를 위로 열리는 "드롭업" 메뉴로 변환하는 과제 CSS에는 스타일을 약간 수정해야 합니다. 아래 제안된 CSS는 이 효과를 달성합니다:

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

설명

bottom: 100%; 위 규칙에 따라 하위 메뉴는 상위 메뉴 항목의 하단에 위치하며 그 위에 마우스를 올리면 "드롭 업"으로 나타납니다.

추가 개선

더 세련된 효과를 얻으려면 다음을 추가하여 하위 메뉴 간의 중복을 제거할 수 있습니다.

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

이렇게 하면 마우스를 올린 메뉴 항목의 하위 메뉴만 열리게 됩니다.

데모

드롭업 효과를 경험하려면 다음 데모를 참조하세요: http://jsfiddle.net/W5FWW/4/.

테두리 유지

원래 메뉴에 테두리가 있는 경우 다음 방법으로 복원할 수 있습니다. 추가:

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

드롭업 기능을 유지하면서 테두리를 유지합니다.

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