title: Opening dropdown menu from navbar branding
body: <p>I would like to open a dropdown menu (using Twitter Bootstrap) everytime I click on the brand of my navbar, so I tried this code:</p>
  
  <pre><code>&lt;div class="navbar navbar-fixed-top"&gt;
  &lt;div class="navbar-inner"&gt;
  &lt;div class="tabbable"&gt;
      &lt;div class="dropdown"&gt;
      &lt;a id="drop1" class="dropdown-toggle" data-toggle="dropdown" href="#menu"&gt;
          &lt;div class="brand"&gt;Brand&lt;/div&gt;
      &lt;/a&gt;
      &lt;ul class="dropdown-menu" role="menu" aria-labelledby="drop1"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  &lt;ul class="nav"&gt;
      &lt;li&gt;
          &lt;a href="#" data-toggle="tab"&gt;Item&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Result</strong>: when I click on it, the menu appears, but it's <em>over</em> the brand, not <em>under</em>. How to fix it?</p>
  
  <h2>Examples</h2>
  
  <ul>
  <li>Standard version [OK]: <a href="http://jsfiddle.net/4rdPU/2/" rel="nofollow">http://jsfiddle.net/4rdPU/2/</a></li>
  <li>Standard version + <code>div class="brand"</code> [Style problem]: <a href="http://jsfiddle.net/4rdPU/1/" rel="nofollow">http://jsfiddle.net/4rdPU/1/</a></li>
  <li>Brand version [Wrong menu position]: <a href="http://jsfiddle.net/4rdPU/3/" rel="nofollow">http://jsfiddle.net/4rdPU/3/</a></li>
  </ul>