Metro UI CSS: How to achieve class=“active” effect?

Question

In bootstrap there is a nice css class 'active' to apply to menu elements to indicate on which page a user is.

I assume it will work the same in metro ui but I was wrong

<ul class="app-bar-menu" data-bind="foreach: router.navigationModel">
   <li data-bind="css: { active: isActive }">
      <a data-bind="attr: { href: hash }, text: title"></a>
   </li>
</ul>

The above code (uses Durandal's router) does not make menu items stand out, even if I explicitly set the class without these bindings.

Is there a similiar mechanism in Metro UI CSS for appbar or horizontal menu? If not, how can I achieve it?

EDIT I found out that class="active" successfully works with lower level menu items but what about the top level?

Answer 1

I didn't find solution other than to add css override. For app-bar this would be

.app-bar-menu > li.active {
    background-color: #005696;
}

If you use non-default colors you'll have to do it specifically for your case, eg green:

.app-bar.green .app-bar-menu > li.active {
    background-color: #128023;
}