Javascript - jQuery: simulare comportamento select in una select personalizzata

E da ieri che sto provando a simulare, con jQuery, il comportamento di una select, tramite una select personalizzata fatta in css+jQuery.

In poche parole, ho creato una select personalizzata con questo codice:

<div class="fake-select">
   <div>
      <ul>
        <li onclick="">Primo elemento</li>
        <li onclick="">Secondo elemento</li>
      </ul>
   </div>
</div>

Praticamente, grazie al css il div dentro al primo div fake-select, non viene visualizzato a video grazie i css, ed è posizionato in modo assoluto, in modo da apparire sotto e no dentro al tag padre, che faccio apparire con questo codice jQuery:

$(document).ready(function()
   {      
      $("div.fake-select").click(function()
      {
         $(this).children("div").show();
      });
   });

E fin qui tutto ok, il problema e chiudere il div che appare quando si clicca su un'altro elemento, quello che insomma accade in una select normale, non so se mi sono spiegato bene, ma come potrei fare?

Ho già provato, ma purtroppo il codice che non funzionava ora lo cancellato, e non posso postarvelo purtroppo.

P.S.: Ho provato anche con questo codice:

   $(document).ready(function()
   {
     $(this).click(function() {
        var fs = $("div .fake-select");
        
        for (var i = 0; i < fs.lenght; i++)
        {
           if (fs.index(i).children("div").is(":visible")) {
              fs.index(i).children("div").hide();
           }
        }
     } 
       
     $("div.fake-select").click(function()
     {       
       $(this).children("div").css("left", $(this).offset().left);
       $(this).children("div").css("top", $(this).offset().top + $(this).height() + 11);
       $(this).children("div").show();
     });
   });

Ma niente.

prova con la funzione focusout():
per esempio

    $(document).ready(function()
       {      
          $("div.fake-select").click(function()
            {
                $(this).children("div").show();
            });

          $("div.fake-select").focusout(function()
          {
             $(this).children("div").hide();
          });
       });

Non so se funzionerà però mi sembra una buona idea!

Potresti chiuderlo al click di qualunque elemento che non sia il fake-select stesso:

$(document).ready(function()
  {      
    $("div.fake-select").click(function()
    {
      $(this).children("div").show();
    });

  $("div:[class!=fake-select]").click(function()
  {
    $("div.fake-select").children("div").hide();
  });
});

Non ho provato il codice, quindi non ti assicuro che funzioni... comunque prova e fammi sapere!