How to enable nested tabs in Bootstrap 3?

Question

css

Hello!
There are tabs on bootstrap 3 with nested tabs.
Purpose: when clicking on top-level tabs, the first nested tab is activated and displays its content accordingly.
The structure is as follows:
City 1, City 2
City 1 -> Tab 1, Tab 2, Tab 3
City 2 -> Tab 4, Tab 5, Tab 6

<ul id="city" class="nav nav-tabs">
  <li><a data-toggle="tab" href="#city1">Краснодар</a></li>
  <li><a data-toggle="tab" href="#city2">Сочи</a></li>
</ul>
<div class="tab-content">
  <div id="city1" class="tab-pane fade">
    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#address1">Аэропорт «Пашковский»</a></li>
      <li><a data-toggle="tab" href="#address2">ЖД вокзал «Краснодар-1»</a></li>
      <li><a data-toggle="tab" href="#address3">ТРЦ «Красная площадь»</a></li>
    </ul>
  </div>
  <div id="city2" class="tab-pane fade">
    <ul class="nav nav-tabs">
      <li><a data-toggle="tab" href="#address4">Аэропорт «Адлер» (Сочи)</a></li>
      <li><a data-toggle="tab" href="#address5">ТРЦ »МореМолл»</a></li>
    </ul>
  </div>
</div>

And the active city already shows its text. Now, when switching to the second city, the active tab remains in the first city, and only after clicking on the desired tab of the second city, the content changes.

Answer 1

Look at the tab buttons in the first tab, see the active class? Look at the tab buttons in the second tab, see there is no active class? And yes, do you see the absence of something important in the tab buttons for cities? For example active?