순수 CSS 드롭다운 메뉴가 아래쪽이 아닌 위쪽으로 열리도록 하려면 어떻게 해야 합니까?

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

Pure CSS 드롭다운 메뉴는 웹사이트를 직관적으로 탐색할 수 있는 훌륭한 방법입니다. 그러나 일부 디자인에서는 메뉴가 아래쪽이 아닌 위쪽으로 열리도록 할 수도 있습니다. CSS를 통해 이를 달성할 수 있는 방법은 다음과 같습니다.

문제:
아래로 열리는 CSS 드롭다운 메뉴가 있는데 위쪽으로 열리도록 변경하려고 합니다. , 위치와 기능을 유지합니다.

해결책:
드롭다운 메뉴를 만들려면 위쪽으로 열려면 하위 메뉴를 배치하는 CSS 규칙을 수정해야 합니다. 방법은 다음과 같습니다.

옵션 1: 상단 여백 조정

#menu:hover ul li:hover ul {
  ...
  margin-top: -22px;
}

다음으로 변경:

#menu:hover ul li:hover ul {
  ...
  margin-top: 1px;
  bottom: 100%;
}

하단 추가: 100 %;, 하위 메뉴가 상위 메뉴 위에 나타나도록 강제합니다. item.

옵션 2: 특정 하위 메뉴 대상

모든 하위 메뉴가 위쪽으로 열리는 것을 원하지 않는 경우 다음 규칙을 사용하여 특정 하위 메뉴를 대상으로 지정할 수 있습니다:

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

옵션 3: 대체 데모

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

이 대체 접근 방식은 경계를 유지합니다. 하위 메뉴.

이러한 CSS 수정을 구현하면 아래쪽을 향한 순수 CSS 드롭다운 메뉴를 위쪽을 향한 메뉴로 쉽게 변환할 수 있습니다. 디자인에 맞게 필요에 따라 여백 값을 조정하는 것을 잊지 마세요.

위 내용은 순수 CSS 드롭다운 메뉴가 아래쪽이 아닌 위쪽으로 열리도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!