on click toggle ul - on click elsewhere hide ul
<p>hey all - my second day of attempting jquery on a task at work, and am a bit stuck.</p>

<p>i've got an unordered list of links.. inside an unordered list of links</p>

<p>on clicking an <code>&lt;li class="headlink"&gt;</code>, I would like the <code>&lt;li class="headlink"&gt;</code> 's child <code>&lt;ul&gt;</code> to become visible.</p>

<p>on clicking away (anywhere on the document), I would like the child <code>&lt;ul&gt;</code> to dissapear.</p>

<p>By default the child <code>&lt;ul&gt;</code> is set to hidden in the stylesheet.</p>

<p>html</p>

<pre><code>&lt;ul id="cssdropdown"&gt;
    &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
    &lt;li class="headlink"&gt;
        &lt;a href="#"&gt;B&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;C&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>jquery</p>

<pre><code>&lt;script type="text/javascript"&gt;

    $(document).ready(function(){
        $('#cssdropdown li.headlink').click(
            function() { $('ul', this).toggle("slow"); });
    });


    $(document).ready(function(){
        $('body').click(function() { 
            $('li ul:visible').hide("slow") } ) } );

&lt;/script&gt;
</code></pre>

<p>Problem - when I click on a <code>&lt;li class="headlink"&gt;</code>, I get the yoyo effect, where the child UL is displayed - and then hides itself.</p>

<p>any advise much appreciated.</p>
