title: jQuery: find-click
body: <p>I have a <code>ul</code></p>
  
  <pre><code>    &lt;div id="menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="http://apple.com"&gt;first&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://apple.com"&gt;second&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.apple.com/iphone/"&gt;third&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="http://apple.com"&gt;third1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://apple.com"&gt;third2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://apple.com"&gt;third3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://apple.com"&gt;third4&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;&lt;!--fi altres --&gt;
      &lt;li&gt;&lt;a href="http://apple.com"&gt;forth&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://www.apple.com/iphone/"&gt;fith&lt;/a&gt;
         &lt;ul&gt;
          &lt;li&gt;&lt;a href="http://apple.com"&gt;fith1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://apple.com"&gt;fith2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://apple.com"&gt;fifh3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;&lt;!--fi nosaltres --&gt;
    &lt;/ul&gt;
  &lt;/div&gt;&lt;!--menu --&gt;
  </code></pre>
  
  <p>I have a jQuery that works fine in hover:</p>
  
  <pre><code>$(function(){
      $('#menu ul li').hover(function(){
              $(this).find('ul').fadeIn()
          },function() {
              $(this).find('ul').fadeOut()
          }
      )
  })
  </code></pre>
  
  <p>The same doesn't work with click:</p>
  
  <pre><code>$(function(){
      $("#menu ul li").click(function(event) {
          event.preventDefault();
          $(this).find('ul').fadeIn()
      });
  })
  </code></pre>
  
  <p>When I click to fadeIn one submenu I have to fadeIn before the others submenus. How?</p>