[jQuery] Select nested <ul> inside a <li> element

[jQuery] Select nested <ul> inside a <li> element


Hi. I want to collapse my navigation. But I can't select the nested
<ul> inside a <li>
The markup:
<ul id="navigation">
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
     <li>Strawberries</li>
</ul>
</li>
<li>Vegetables
    <ul>
     <li>Tomatoes</li>
<li>Peas</li>
</ul>
</li>
This is what I tried to do:
$('#navigation li').click(function() {
        $(this).next().slideToggle("fast");
    });
But this code doesn't collapse the nested ul but the next li. When I
click Fruits it'll toggle Vegetables.
How can I select just the ul inside the li? When I click Fruits it
should toggle the ul with Apples, Bananas ...
This one won't work either:
$('#navigation li').click(function() {
        $(this ' ul').slideToggle("fast");
    });
or this:
$('#navigation li').click(function() {
        $(this).child().slideToggle("fast");
    });
Hope somebody can help. Thanks!