Hi there!  I am a front-end designer new to Umbraco and Razor. I'm working on a vertical subnavigation. I have an "active" class working for third-level navigation, but it's applying to the entire list. How do I ensure the active class works only for the active page, and not for other navigation items in the list?  Apologies for the simpleton question, I just don't know how to write the syntax! 

@inherits umbraco.MacroEngines.DynamicNodeContext

@{ 
    @*Get the root of the website *@
    var root = Model.AncestorOrSelf(2);
}

<ul class="nav nav-pills nav-stacked subnav">
    @foreach (var page in root.Children.Where("Visible"))
    { 
        <li class="@page.IsAncestorOrSelf(Model, "active", "")">
            <a href="@page.Url">@page.Name</a>
                @if (page.Childen != null && page.Children.Count() > 0)
            {
                <ul class="subnav">
                @foreach (dynamic subpage in page.Children.Where("Visible")){
                    <li class="@subpage.IsAncestorOrSelf(Model, "active", "")">
                         <a href="@subpage.Url">@subpage.Name</a>
                    </li>
                }
                </ul>
            }
        </li>
    }
</ul>

This produces this result:

But what I'm really trying to achieve is this:

thanks!
bridgette