title: Bootstrap dropdown disappears on input select
body: <p>I have a Bootstrap dropdown menu I plan to use to login. It appears fine but when I select the username nput it vanishes since the focus has gone to the input. How would I go about adding in support for the inputs or is there a working method for this?</p>
  
  <p>My current code is:</p>
  
  <pre><code>    &lt;li id="fat-menu" class="dropdown"&gt;
           &lt;a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" data-target="#"&gt;Login &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
           &lt;ul class="dropdown-menu" role="menu" aria-labelledby="drop3"&gt;
              &lt;li role="presentation"&gt;&lt;input name="username" type="text" placeholder="Username" /&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;input name="password" type="password" placeholder="Password" /&gt;&lt;/li&gt;
              &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Login&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
       &lt;/li&gt;
  </code></pre>
  
  <p>My attempt at jsfiddle. I couldnt get the dropdown to work at all: <a href="http://jsfiddle.net/KF8dv/" rel="noreferrer">http://jsfiddle.net/KF8dv/</a></p>