title: Twitter bootstrap nav-pills with dropdown
body: <p>I created nav-pills with Twitter bootstrap 3.<br>
  Everything is fine except dropdowns.<br>
  Documentation shows the layout for tab links, but not for the content: <a href="http://getbootstrap.com/components/#nav-dropdowns" rel="noreferrer">http://getbootstrap.com/components/#nav-dropdowns</a></p>
  
  <p>I want to show content when user selects one of the dropdown links.</p>
  
  <p>Fiddle is like this: <a href="http://jsfiddle.net/mavent/skL5H/3/" rel="noreferrer">http://jsfiddle.net/mavent/skL5H/3/</a></p>
  
  <pre><code>&lt;div class="tabbable"&gt;
      &lt;ul class="nav nav-tabs nav-pills" id="myTab"&gt;
          &lt;li class="active"&gt; &lt;a href="#tab1" data-toggle="tab"&gt;Part 1&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li class=""&gt; &lt;a href="#tab2" data-toggle="tab"&gt;Part 2&lt;/a&gt;
  
          &lt;/li&gt;
          &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Activity &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
              &lt;ul class="dropdown-menu" role="menu"&gt;
                  &lt;li&gt;&lt;a href="#tab3"&gt;Action&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#tab4"&gt;Another action&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;br&gt;
      &lt;div class="tab-content"&gt;
          &lt;div class="tab-pane active" id="tab1"&gt;aaaaaaaaaaaa&lt;/div&gt;
          &lt;div class="tab-pane" id="tab2"&gt;bbbbbbbbbbbb&lt;/div&gt;
          &lt;div class="tab-pane" id="tab3"&gt;cccccccccccccc&lt;/div&gt;
          &lt;div class="tab-pane" id="tab4"&gt;dddddddddddddd&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>