드롭다운 메뉴 대신 CSS 드롭업 메뉴를 어떻게 만들 수 있나요?

순수 CSS를 사용한 드롭다운 메뉴

이 문서에서는 순수 CSS로 만든 드롭다운 메뉴를 사용자 정의하여 "드롭다운" 메뉴 대신 "드롭다운" 메뉴. 메뉴바는 레이아웃 하단에 있는데 어떻게 위로 열리게 하느냐가 문제입니다.

해결책

드롭업 메뉴를 만들려면, CSS 규칙을 조정해야 합니다.

데모 1:

하단 추가: 100%; 기존 CSS 규칙:

#menu:hover ul li:hover ul {
    bottom: 100%; /* added this attribute */
}

데모 2:

하위 메뉴가 드롭업 동작의 영향을 받지 않도록 하려면 다음 규칙을 사용하세요.

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

데모 3:

드롭다운 메뉴 주변의 테두리를 복원하려면:

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

여기 JSFiddle 데모가 있습니다: http://jsfiddle.net/W5FWW/4/

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