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

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

이 기능이 기본적으로 지원되지 않더라도 Twitter Bootstrap 2의 요소를 사용하여 다단계 드롭다운 메뉴를 생성할 수 있습니다. .

업데이트된 답변(부트스트랩 v2.1.1)

Bootstrap은 이제 v2.1.1에서 기본적으로 다중 레벨 드롭다운을 지원합니다. 업데이트된 스타일시트는 중첩된 드롭다운 메뉴에 대한 스타일을 제공합니다.

원래 답변

원래 Bootstrap은 하위 메뉴 지원을 제공하지 않았습니다. 그러나 CSS와 HTML을 활용하여 맞춤형 솔루션을 구현할 수 있습니다.

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;
}

HTML

추가 중첩된 드롭다운 메뉴에 대한 .sub-menu 클래스 항목:

<ul class="dropdown-menu">
  <li>Item 1</li>
  <li class="sub-menu">
    <a href="#">Item 2</a>
    <ul class="dropdown-menu">
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

이 솔루션은 중첩된 드롭다운 메뉴를 상위 메뉴 항목 오른쪽에 배치하고 클릭 가능한 하위 메뉴를 나타내는 화살표를 추가합니다.

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