HTML markup inconsistency in menus

[jneuenhaus]

Just a heads up on a minor inconsistency with the menu HTML classes.

Summary

In the source, menus have the following markup:

With a dropdown: li.current_page_ancestor
With no dropdown: li.current-page-ancestor

Detail (Steps to Reproduce)

One menu exists with two top-level pages, called A and B. Both have child pages, but only page A will display a drop-down menu. When you are on a child of page A, you will find:

li.current_page_ancestor

But when you are on a child of page B, you will get this:

li.current-page-ancestor

Commentary

This currently requires you to target both versions to get consistent styling, JavaScript functionality. Could be a "feature", if you wanted to identify the list item without a drop down menu, but semantically, it could be done in a cleaner way.

This is intended behavior, because current_page_ancestor and current-page-ancestor have different meanings.

current_page_ancestor is meant to be backwards-compatible with wp_page_menu() as an alias for current-menu-ancestor. It indicates that the menu item assigned that class is an ancestor in the arbitrary menu hierarchy to the menu item of whatever page you're currently viewing.

For example, if C is a post (not a page) and is made a menu item under A in the menu hierarchy, when viewing C you will see that A has the current-menu-ancestor and current_page_ancestor classes. That's because in the menu A is ancestor to C.

In contrast, current-page-ancestor indicates a relationship among pages not menu items. If D is a page that's a child of A, viewing D will give A's menu item the current-page-ancestor class, because D is actually a child page of A.