title: Bootstrap Dropdown - move other content
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!-- saved from url=(0073)http://tutsme-webdesign.info/tutorials/navs/pills_stacked_panesright.html --&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
          &lt;title&gt;Bootstrap 3 Navs Tabs Pills&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
          &lt;!-- Bootstrap core CSS --&gt;
          &lt;link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css" rel="stylesheet" media="screen"&gt;
  
  
          &lt;!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
          &lt;!--[if lt IE 9]&gt;
            &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"&gt;&lt;/script&gt;
            &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.2.0/respond.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;ul class="nav nav-pills nav-stacked" data-toggle="collapse"&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="" data-toggle="dropdown" class="dropdown-toggle"&gt;&lt;span class="glyphicon glyphicon-tree-deciduous"&gt; Nachbarschaft &lt;/span&gt;&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li role="presentation"&gt;&lt;a href="#hoodProfile"&gt;Profil&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a href="#neighbours"&gt;Nachbarn&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li role="presentation"&gt;&lt;a href="#quests"&gt;&lt;span class="glyphicon glyphicon-tasks"&gt; Aufgaben&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- end of container --&gt;
          &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
          &lt;script src="http://code.jquery.com/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
          &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How can I make the dropdown of the first pill make the lower pills move down? So when I click the dropdown, I can still see the lower pill "Aufgaben"?</p>
  
  <p>JSFiddle Example: <a href="http://jsfiddle.net/o0xutq34/" rel="nofollow">http://jsfiddle.net/o0xutq34/</a>
  (based on <a href="http://tutsme-webdesign.info/tutorials/navs/pills_stacked_panesright.html" rel="nofollow">http://tutsme-webdesign.info/tutorials/navs/pills_stacked_panesright.html</a>)</p>
  
  <p>Thanks in advance!</p>