Código HTML para menús desplegables:

<ul>
 <li class="dropDownLink">
   Locality
   <ul class="dropDown">
     <li class="dropDown-row"><input tpye="text"></li>
   </ul>
 </li>
 <li class="dropDownLink">
   Locality
   <ul class="dropDown">
     <li class="dropDown-row"><input tpye="checkbox"> Option 1</li>
     <li class="dropDown-row"><input tpye="checkbox"> Option 2</li>
     <li class="dropDown-row"><input tpye="checkbox"> Option 3</li>
   </ul>
 </li>
</ul>

Código jquery para mostrar el menú desplegable:

$('.dropDownLink').on('click', function () {
  $('.dropDown').hide();
  $(this).children($('.dropDown')).show();
});

jQuery para ocultar menús desplegables al hacer clic fuera del menú desplegable:

$(document).on('click', function (e) {
  if(!$('.dropDownLink').is(e.target) && !$('.dropDown').is(e.target)) {
    $('.dropDown').hide();
  }
});

Al hacer clic en un documento que no sea el menú desplegable, funciona bien, pero al hacer clic en el contenido dentro del menú desplegable, se oculta el menú desplegable principal. También hay algunos contenidos de formularios en el menú desplegable, como campos de texto de entrada, casillas de verificación y enlaces. El menú desplegable no debe ocultar hacer clic en estos elementos dentro del menú desplegable.

Por favor, ayúdame con esto. Gracias por adelantado.