CSS 드롭다운 메뉴를 드롭업 메뉴로 변환하는 방법은 무엇입니까?

세로 드롭다운 메뉴의 드롭업 하위 메뉴: 순수 CSS로 구현

드롭다운 메뉴의 경우 드롭업으로 변환 메뉴는 일반적이며, 특히 메뉴 표시줄이 레이아웃 하단에 있는 경우 더욱 그렇습니다. 이를 달성하려면 CSS 스타일을 일부 변경해야 합니다.

질문: 드롭다운 메뉴를 드롭업 메뉴로 변환

주어진 드롭다운 메뉴 CSS, 드롭다운 메뉴가 되도록 스타일을 수정하는 방법 ?

해결책: #menu:hover ul li:hover ul 규칙 조정

#menu:hover ul li에 하단: 100% 속성을 추가하여 수행할 수 있습니다. 드롭업 기능을 구현하려면 ul 규칙을 가리키세요.

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

선택적 개선: 최상위 하위 메뉴에만 드롭업 적용

하위 메뉴에도 드롭업이 적용되지 않도록 방지 효과를 위해 다음 규칙을 추가할 수 있습니다.

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

기타 고려 사항: 테두리 복원

하단 추가: 100% 속성이 제거될 수 있습니다. 하위 메뉴. 테두리를 복원하려면 다음 속성을 추가할 수 있습니다.

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

데모

다음은 이 기술을 보여주는 몇 가지 예입니다.

• [ 데모 1](https://jsfiddle.net/W5FWW/4/)
• [데모 2](https://jsfiddle.net/zyp6c/)
• [데모 3](https //jsfiddle.net/phkj20zo/)

위 내용은 CSS 드롭다운 메뉴를 드롭업 메뉴로 변환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!