jQuery - show only current ul

Here the simple explanations with demo.

STEP 1:
<nav>
    <li><a href="#">1.0.0</a></li>
    <li><a href="#">2.0.0</a>
        <ul class='children'>
            <li><a href="#">2.1.0</a>
                <ul class='children'>
                    <li><a href="#">2.1.1</a></li>
                    <li><a href="#">2.1.2</a></li>
                </ul>
            </li>
            <li><a href="#">2.2.0</a>
                <ul class='children'>
                    <li><a href="#">2.2.1</a></li>
                    <li><a href="#">2.2.2</a></li>
                    <li><a href="#">2.2.3</a></li>
                    <li><a href="#">2.2.4</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">3.0.0</a></li>
    <li><a href="#">4.0.0</a></li>
    <li><a href="#">5.0.0</a></li>
</nav>

STEP 2:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script>

<script>
$("nav li").find("ul").hide().end().find("a")
// hide all other ul's in the nav
.click(function(e) {
    $(this).parent().siblings().find('ul').fadeOut('fast');
    $(this).parent().children('ul').delay(200).fadeToggle('fast');
});
</script>

STEP 3:
<style>
body {
    font-size: 12px;
    line-height: 16px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: #575757;
}
a, a:active, a:visited {
    color:#575757;
    text-decoration:none;
}
a:hover {
    color:#888888;
}
nav {
    font-size: 14px;
    text-transform:uppercase;
    position:relative;
}
.children {
    width:146px;
    top:0;
    position:absolute;
    margin-left: 160px;
}
.selected { color:blue; }
</style>

Demo url : http://fiddle.jshell.net/866UZ/show/

Thanks to fiddle , its learn and run from that site and thanks to jquery :)