Drop Down menu in Jquery
<p>hello friends i have tryied folowing code as u can see here <a href="http://jsfiddle.net/QCdz4/" rel="nofollow">http://jsfiddle.net/QCdz4/</a> i want to code for drop down menu to appear on <code>click()</code> and  disappear when <code>mouseout()</code> but its not working  please help me out Thank in advance</p>

<p>Jquery</p>

<pre><code>&lt;script&gt;
    $(document).ready(function(){
        $('.click ul').css({display:'none', position:'absolute'});
        $('.click').click(function() {
            $(this).children('ul').slideDown(200);
            $(this).on('mouseout', function() {
                $(this).children('ul').slideUp(200);
            })
        })
    })
&lt;/script&gt;
</code></pre>

<p>HTML</p>

<pre><code>&lt;div class="click"&gt;
    click
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;one&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;two&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;three&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;four&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
