Jquery simple menu
<p>I need to create a menu same as this one:</p>

<p><a href="http://www.girard-perregaux.com/collection/univers-en.aspx?type=1" rel="nofollow">http://www.girard-perregaux.com/collection/univers-en.aspx?type=1</a></p>

<p>Click on collections then on manufacturer, then again on manufacturer to close. As you can see first it slides down, then after that it just change links without again sliding up and down, untill you click on same open element.</p>

<p>I first tried this:</p>

<pre><code>$('ul.sub-menu').hide();
$('.sf-menu').children('li').click(function(){  
    $(this).children(".sub-menu").slideToggle('slow');
    $('ul.sub-menu').hide();
</code></pre>

<p>its working but its sliding up and down every time you click on menu, and not just changing list items. So I figured out I need to somehow target child li elements instead of ul. Also if you click between parrent list items, it needs to switch like on that menu, but if i click again on same open list item, it needs to close(slide up.)</p>

<p>Many thanks for this as I spent half a day trying to figure it out. Also how to target children li, i tried this:</p>

<pre><code>$('.sf-menu').children('li').click(function(){  

$(this).children(".sub-menu li")
</code></pre>

<p>but nothing.</p>
