Zatrzymaj tylko jedną listę rozwijaną z zamknięcia po kliknięciu

Mam menu rozwijane (tylko jedno, nie wszystkie), a wewnątrz niego chcę mieć kilka pól wejściowych, w których ludzie mogą wpisywać rzeczy bez ukrywania, jak tylko klikniesz na nie (ale zamyka się, jeśli klikniesz poza nim).

Stworzyłem jsfiddle:http://jsfiddle.net/denislexic/8afrw/2/

A oto kod, podstawowy:

<div class="btn-group" style="margin-left:20px;">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
      <li>Email<input type="text" place-holder="Type here" /></li>
      <li>Password<input type="text" place-holder="Type here" /></li>
  </ul>
</div>​

Zasadniczo chcę, aby nie zamykał się po kliknięciu listy rozwijanej (ale zamyka się po kliknięciu przycisku akcji lub poza listą rozwijaną). Jak dotąd moim najlepszym pomysłem było dodanie klasy i spróbowanie zrobienia jakiegoś JS, ale nie mogłem tego zrozumieć.

Dzięki za pomoc.

questionAnswers(7)

yourAnswerToTheQuestion