title: How do I prevent my dropdown from closing when clicking inside it?
body: <p>I'm using Bootstrap to create a dropdown for <a href="http://servers.binf.ku.dk/hemaexplorerbeta/" rel="noreferrer">my website</a>, but I am having some problems with it.</p>
  
  <p>On my website, if clicked on "Select Populations" the popup will appear (FYI: clicking "submit" will have things appear in it). And when I click inside of it, it always closes down. How can I prevent it from doing so? I only want it to close if clicked outside of the field.</p>
  
  <p>Here's the code I use:</p>
  
  <p>CSS:</p>
  
  <pre><code>@import url('http://getbootstrap.com/dist/css/bootstrap.css');
  
  .dropdown-menu:before {
    position: absolute;
    top: -7px;
    left: 9px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
  }
  
  .dropdown-menu:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="dropdown"&gt;
      &lt;button data-toggle="dropdown" id="submitButton" type="button" id="pops" &gt;Select Populations&lt;/button&gt;
      &lt;ul id="popupDropDown" class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
  
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>