title: jQuery Drop Down menu - on click visible
body: <p>I need a drop down menu which should do two things. </p>
  
  <ol>
  <li>When we hover, sub menu should be visible. When the mouse taken out, it should hide.</li>
  <li>When user clicks on menu or its sub menu, then the sub menu should be visible. It should not hide when mouse taken out. </li>
  </ol>
  
  <p>I tried this, but it is not working...</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul id="navigation"&gt;
      &lt;li class="dropdown"&gt;&lt;a href="#1"&gt;Home&lt;/a&gt;
      &lt;li class="dropdown"&gt;&lt;a href="#2"&gt;Solutions&lt;/a&gt;
          &lt;ul class="sub_navigation"&gt;
              &lt;li&gt;&lt;a href="#2"&gt;Video&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#3"&gt;Animation&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('body').ready(function() {
      $('.dropdown').hover(function() {
          $(this).find('.sub_navigation').slideToggle(); 
      });
  });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $('body').ready(function() {
      $('.dropdown a').click(function() {
          $(this).find('.sub_navigation').show(); 
      });
  });
   &lt;/script&gt;  
  </code></pre>
  
  <p>Please give some tips...</p>
  
  <p>Thank you</p>