jQuery: find-click
<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>
