Jquery slideDown child ul
<p>How can I slide down ONLY the child ul of the element that is being hovered over? </p>

<pre><code>&lt;ul&gt;
        &lt;li class="main"&gt;
            &lt;a href="real_estate.htm"&gt;Real Estate &lt;/a&gt;
            &lt;ul class="sub"&gt;
                &lt;li&gt; &lt;a href="#"&gt;Consulting Services&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt; &lt;a href="#"&gt;Investment&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt; &lt;a href="#"&gt;Property Management&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt; &lt;a href="#"&gt;Development&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="main"&gt;
            &lt;a href="investment.htm"&gt;Investment&lt;/a&gt;
            &lt;ul class="sub"&gt;
                &lt;li&gt;&lt;a href="#"&gt;Philosophy&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Criteria&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
&lt;/ul&gt;

Jquery 

    $(document).ready(function() {
    $(".sub").hide();
    $(".main").hover(function() {
        $(".sub").slideDown('slow');
    });
});
</code></pre>
