title: Show menu when i click on button and hide that when i click anywhere on the page or button
body: <p>I have small dropdown profile menu with logout button etc. I need to show the menu when I click on the button and hide it when i click anywhere on page or on the button as well.</p>
  
  <pre><code>&lt;div id='menu'&gt;
      &lt;ul&gt;
          &lt;li class='has-sub'&gt; &lt;a class="testbutton" id="userButton" onclick="dropdown()" href="#"&gt;
                              &lt;span id="buttonText"&gt;User name&lt;/span&gt; &lt;span id="triangleDown"&gt;&amp;#9662;&lt;/span&gt;
                          &lt;/a&gt;
  
              &lt;ul id="submenu"&gt;
                  &lt;li class='has-sub'&gt;&lt;a href='#'&gt;&lt;span&gt;Change password&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class='has-sub'&gt;&lt;a href='logout.php?action=0'&gt;&lt;span&gt;Logout&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I used JavaScript. At this time menu is displayed on hidded only when I click on profile button. I also know how to start function using something like document.ready.</p>
  
  <p>My not working code:</p>
  
  <pre><code>function dropdown() {
      if ($('#submenu').css('visibility') == 'hidden') {
          $('#submenu').css('visibility', 'visible');
      } else {
          $('#submenu').css('visibility', 'hidden');
      }
  };
  
  $(document).click(function (event) {
      if ($('#submenu').css('visibility') == 'visible') {
          $('#submenu').css('visibility', 'hidden');
      }
  });
  </code></pre>
  
  <p>But when I combine this methods it does not works. So when I clicked on the button to open menu, nothing happened.</p>
  
  <p>Sorry for my English :) 
  Thanks for help in advance.</p>