<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>
    <li><a href="#">Item Three</a></li>
  </ul>
</div>
<a href="#" class="btn btn-default">Normal Button</a>
<a href="#" data-remote class="btn btn-default">Remote Link</a>

<p>When the dropdown menu is open, clicking anywhere else in this frame <em>should</em> close it. Unfortunately, clicking on "Remote Link" (which contains the <code>data-remote</code> attribute) doesn't close the dropdown because jquery-ujs is stopping event progation.</p>
  

body {
  padding: 2em;
}

.nav {
  border: 1px solid #f8f8f8;
  border-radius: 4px;
}

p {
  margin: 1em 0;
}