Twitter Bootstrap 2로 다단계 드롭다운 메뉴를 어떻게 만들 수 있나요?

Twitter Bootstrap 2로 다단계 드롭다운 구현

Twitter Bootstrap 2에는 기본적으로 다단계 드롭다운 메뉴를 생성하는 기능이 없습니다. 이러한 제한을 극복하기 위해 개발자는 추가 CSS 및 HTML 요소를 사용하여 창의적인 해결 방법을 고안했습니다.

사용자 정의 CSS 솔루션

한 가지 접근 방식은 사용자 정의 CSS를 추가하여 모양과 동작을 정의하는 것입니다. 하위 메뉴 수:

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

이 CSS는 상위 메뉴 항목 옆에 하위 메뉴를 배치하고 크기와 위치를 계산합니다.

참고: 이 접근 방식은 Bootstrap 3에서 더 이상 사용되지 않으며 이후 버전에서는 더 이상 필요하지 않습니다.

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