Bootstrap выпадающих внутри выпадающего меню

Question

У меня есть ряд выпадающих функций Bootstrap, которые отображают списки стран для каждого континента, американские штаты и т.д. Они выглядят так:

<nav class="dropdown Canada" style="margin-top: 5px;"> 
    <button class="btn dropdown-toggle" type="button" id="dropdownCanada" data-toggle="dropdown" aria-expanded="true" style="width: 100%; background: #f00; color: #fff;"> <b>Canada</b> </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownCanada"> 
    <?php 
echo join($Provinces, ''); 
?> 
    </ul> 
</nav> 

<nav class="dropdown States" style="margin-top: 5px;"> 
    <button class="btn dropdown-toggle" type="button" id="dropdownStates" data-toggle="dropdown" aria-expanded="true" style="width: 100%; color: #fff;"> <b>United States</b> </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownStates"> 
    <?php 
echo join($States, ''); 
?> 
    </ul> 
</nav> 

Они работают хорошо, но я бы например, чтобы вывести все списки стран внутри выпадающего списка и все списки штатов, провинций и т. д. внутри другого. Поэтому, когда вы нажимаете кнопку с надписью «Страны», на ней отображаются кнопки с надписью «Северная Америка», «Африка» и т. Д. Затем пользователь нажимает «Северная Америка», чтобы просмотреть список всех стран Северной Америки.

Но когда я помещаю все свои кнопки вниз в аналогичную кнопку, это работает только наполовину. Когда я нажимаю «Страны», он отображает список кнопок, но ничего не происходит, когда я нажимаю одну из этих кнопок.

Может ли кто-нибудь показать мне, как это сделать правильно? Или это не может быть сделано с Bootstrap? Если есть лучший способ сделать это, это работает для меня. ;)

Answer 1

Я не уверен, что правильно понял вашу проблему, но это то, что вы ищете? : Twitter Bootstrap Multilevel Dropdown Menu