title: nav-tabs with dropdown-menu in bootstrap
body: <p>I'm trying to build a sample using bootstrap. My issue is nav-tabs in which I want to have working dropdown menu and switch between. Here is my nav-tabs with names:| City 1 | Citys 2 | City 3 / Each of the cities has its own content. Lets say City 2 has a drop down menu. When press on it shows two addresses for choice. If you choose any address it shows its own content.<br>
  Here is my HTML: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class="nav nav-tabs nav-justified" id="myTab"&gt;
      &lt;li class="active"&gt;&lt;a href="#City1" data-toggle="tab"&gt;City1&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;
      &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#City2"&gt;City2 &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#Address1"&gt;Address1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#Address2"&gt;Address2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#City3" data-toggle="tab"&gt;City3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content"&gt;
      &lt;div class="tab-pane active" id="City1"&gt;
          &lt;h4&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/h4&gt;Lorem profile dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
          &lt;p&gt;Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.&lt;/p&gt;
                &lt;/div&gt;
      &lt;div class="tab-pane" id="Address1"&gt;
          &lt;h4&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/h4&gt;Lorem profile dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
          &lt;p&gt;Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane" id="Address2"&gt;
          &lt;h4&gt;&lt;i class="glyphicon glyphicon-user"&gt;&lt;/i&gt;&lt;/h4&gt;Lorem profile dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                  &lt;p&gt;Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="tab-pane" id="City3"&gt;
          &lt;h4&gt;&lt;i class="glyphicon glyphicon-cog"&gt;&lt;/i&gt;&lt;/h4&gt;Lorem settings dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
          &lt;p&gt;Quisque mauris augue, molestie.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thank you in advance! </p>