title: How to hide ul using jquery when users click elsewhere
body: <p>I have this code to toggle the <code>ul</code> visibility.</p>
  
  <pre><code>$('.cliackable').click(function(){ $(this).find('ul').toggle(); });
  
  $('.cliackable').click(function(event) {
      event.stopPropagation();
  });
  </code></pre>
  
  <p>How do I toggle this when user clicks outside the <code>ul</code>?</p>
  
  <p>I tried using the answer here but to no avail : <a href="https://stackoverflow.com/questions/16385993/jquery-toggle-hide-on-click-elsewhere">jQuery toggle hide on click elsewhere</a></p>
  
  <p><strong>Update</strong></p>
  
  <p>my CSS looks like this</p>
  
  <pre><code>&lt;!-- language: css --&gt;
  html, body {height:100%;width:100%;margin:0;}
  #navigation-main {width:65px;margin-left:10px;}
  #navigation-main .sf-menu-main li ul {display:none;}
  #navigation-main .sf-menu-main li li {background:#e73420;border-top:1px solid rgba(0,0,0,0.1); width: 235px; clear:both; padding:5px 0px 5px 15px; color:#fff;}
  #navigation-main .sf-menu-main li li a {width: 250px; padding:5px 10px 5px 15px; color:#fff;}
  </code></pre>
  
  <p>and the html </p>
  
  <pre><code>&lt;div id="navigation-main"&gt;
      &lt;ul class="sf-menu-main"&gt;
          &lt;li style="color:#fff;" class="clickable"&gt;
              Menu
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a class="login-head-font" href=""&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class="login-head-font" href=""&gt;Events&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried using your js but didnt work</p>