>웹 프론트엔드 >CSS 튜토리얼 >CSS만 사용하여 위쪽으로 열리는 드롭다운 메뉴를 어떻게 만들 수 있나요?

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

Susan Sarandon
Susan Sarandon원래의
2024-12-10 08:43:17915검색

How Can I Create an Upward-Opening Dropdown Menu Using Only 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.