Bagaimana untuk Mencipta Menu Jatuh Turun Berbilang Peringkat dalam Twitter Bootstrap 2?

Menu Turun Berbilang Peringkat untuk Twitter Bootstrap 2

Mencipta menu lungsur berbilang peringkat menggunakan elemen daripada Twitter Bootstrap 2 memerlukan pelaksanaan tersuai.

Respon Asal Pra-v2.1.1

Bootstrap 2 tidak menyokong lungsur turun berbilang peringkat secara asli. Untuk mencapai matlamat ini, anda boleh menggunakan CSS tambahan untuk meletakkan lungsur turun submenu bersebelahan dengan item menu induk.

.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 {
  /* Styling for the arrow pointer */
  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 {
  /* Additional styling for the arrow pointer */
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

Respond Kemas Kini v2.1.1 dan Kemudian

Untuk Bootstrap versi 2.1.1 dan ke atas, lungsur turun berbilang peringkat disertakan secara lalai. Cuma ikut garis panduan dalam dokumentasi:

[Bootstrap Multilevel Dropdown Documentation](https://getbootstrap.com/docs/2.3.2/components/#dropdowns)

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Menu Jatuh Turun Berbilang Peringkat dalam Twitter Bootstrap 2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!