Twitter Bootstrap에서 다단계 드롭다운 메뉴를 만드는 방법은 무엇입니까?

Twitter Bootstrap의 다단계 드롭다운 메뉴

Twitter Bootstrap 2에는 다단계 드롭다운 메뉴 기능이 없습니다. 그러나 이 기능을 달성하기 위해 구현할 수 있는 해결 방법이 있습니다.

원래 답변(Bootstrap 버전 3)

Bootstrap 버전 3 이상에서는 다단계 드롭다운 메뉴 기본적으로 지원됩니다. 예를 보려면 다음 바이올린을 참조하십시오.

http://jsfiddle.net/2Smgv/2858/

원래 답변(Bootstrap 버전 2)

이전 버전의 Bootstrap의 경우 다음과 같은 CSS 해킹이 가능합니다. 적용:

/* CSS code for sub-menu customization */
.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는 2레벨 드롭다운 메뉴를 처리하는 새로운 ".sub-menu" 클래스를 생성하고, 메뉴 항목 옆에 배치하며, 메뉴 항목 왼쪽에 표시되도록 화살표를 수정합니다. 하위 메뉴 그룹입니다.

데모

여기에서 이 해결 방법의 데모를 볼 수 있습니다. [데모링크]

위 내용은 Twitter Bootstrap에서 다단계 드롭다운 메뉴를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!