title: Twitter Bootstrap topbar dropdown changes vertical size
body: <p>I have a problem adding a dropdown to a Twitter Bootstrap framework. After I have added the dropdown it expands height of the whole topbar and this is what I'm trying to fix. </p>
  
  <p>Page URL is <a href="http://locabikes.de/" rel="nofollow noreferrer">http://locabikes.de/</a></p>
  
  <p>If you hover the mouse on the "DE" symbol in the upper right corner, the dropdown will show up but the topbar will also change it's vertiacal size covering the navigation bar. </p>
  
  <p>Is there some way to only show other languages to choose without changing the size of a topbar? 
  This is the code I'm talking about:</p>
  
  <pre><code>&lt;div class="col-sm-12 col-sm-no-pd"&gt;
  &lt;ul id="lng"&gt;
      &lt;li&gt;
          &lt;span&gt;DE&lt;/span&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="http://locabikes.com"&gt;EN&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://locabikes.pl/"&gt;PL&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div id="topSocial"&gt;
      &lt;a href="http://www.facebook.com/locabikes" target="_blank" class="icon icon-facebook"&gt;&lt;/a&gt;
      &lt;a href="https://www.pinterest.com/locabikes/" target="_blank" class="icon icon-pinterest"&gt;&lt;/a&gt;
      &lt;a href="https://instagram.com/loca_bikes/" target="_blank" class="icon icon-instagram"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  This is how I want it to look like after hoovering on the current language hyperlink.</p>
  
  <p><a href="https://i.stack.imgur.com/uaKBo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uaKBo.jpg" alt=""></a></p>