Expanding / collapsing navigation

CSS

ul {
    margin:0.5em 0;
    padding:0 0 0 1em;   
}

ul ul {
    margin: 0;            
}

a.active, li.active a {
    color: #f00;            
}
​

HTML

            <nav id="downloadGenerator">
                <ul>
                    <li><a class="active" href="#" title="Overview">Overview</a>
                        <ul class="active">
                            <li class="active"><a href="#" title="Highlights of the year">Highlights of the year</a></li>
                            <li><a href="#" title="Chairman's letter">Chairman's letter</a></li>
                            <li><a href="#" title="Group at a glance">Group at a glance</a></li>
                            <li><a href="#" title="Strategy">Strategy</a></li>
                            <li><a href="#" title="Business model">Business model</a></li>
                        </ul>
                    </li>
                    <li><a href="#" title="Business review">Business review</a>
                        <ul>
                            <li class="active"><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                        </ul>
                    </li>
                    <li><a href="#" title="Governance">Governance</a>
                        <ul>
                            <li class="active"><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                        </ul>
                    </li>
                    <li><a href="#" title="Financial statements">Financial statements</a>
                        <ul>
                            <li class="active"><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                        </ul>
                    </li>
                    <li><a href="#" title="Shareholder information">Shareholder information</a>
                        <ul>
                            <li class="active"><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                        </ul>
                    </li>
                    <li><a href="#" title="Previous reports">Previous reports</a>
                        <ul>
                            <li class="active"><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                            <li><a href="#" title="Example">Example link</a></li>
                        </ul>
                    </li>
                </ul>
            </nav><!-- /#downloadGenerator -->​

javascript

$('#downloadGenerator ul ul').hide();
$('#downloadGenerator ul ul.active').show();
$('#downloadGenerator > ul > li > a').click(function() {
    $(this).next('#downloadGenerator ul ul').slideToggle(300);
    $(this).toggleClass('active');
});