{% for root in children %}
    {% if root.children %}
        <li class="grp-collapse grp-closed">
            <a href="javascript://" class=" grp-collapse-handler">
                {{ root.title }}
            </a>
            <ul class="">
                {% for node in root.children %}
                    <li class="">
                        <a href="{{ node.url }}">
                            {{ node.title }}
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </li>
    {% else %}
        <li><a href="{{ root.url }}">{{ root.title }}</a></li>
    {% endif %}
{% endfor %}

<script>
    (function($) {
        $(document).ready(function() {
            $("#grp-navigation .grp-collapse").mouseover(function(){
                $("#grp-navigation .grp-collapse").removeClass('grp-open');
                $("#grp-navigation .grp-collapse").removeClass('grp-closed');
                $(this).addClass('grp-open');
            }).mouseleave(function(){
                $("#grp-navigation .grp-collapse").removeClass('grp-open');
            });
        });
    })(grp.jQuery);
</script>
