Application of "selected" style to pure-menu-link not specific enough in dropdown use case

[markmatney]

Description

The current implementation applies "selected" styles to all items of a submenu when that submenu is itself the selected item of a top-level menu. This behavior is undesirable for my use case, and I am having trouble thinking of use cases where this is desirable. If every <li> is special (i.e., selected), then are any of them, really?

Expected behavior

Developers should be able to choose the subset of submenu items that should have the "selected" style applied. Adding the pure-menu-selected class to a pure-menu-item <li> should affect only its child <a> with class pure-menu-link, and no others.

Actual behavior

See above description.

Steps to Reproduce

A solution could be implemented using the child combinator syntax for the selectors on lines 55 and 56:

.pure-menu-selected > .pure-menu-link,
.pure-menu-selected > .pure-menu-link:visited {
    color: #000;
}

Environment

• Pure version: 1.0.0
• Browser name and version: Firefox 59.0b10, Chromium 64.0.3282.167 (Ubuntu 16.04)
• Link to your project or example: https://jsfiddle.net/markmatney/yphsw79v/

[redonkulus]

I see what you are saying, do you have to add the pure-menu-selected class to the top-level menu? If its just added to the menu item selected, then this issue does not exist. If it is something specific to your application, then overwriting Pure in your stylesheet might be the best option.

[markmatney]

I'm not sure I understand your question. My use of pure-menu-selected follows the example in the documentation, which is slightly different than my use case (where menu items are <li><a></a><ul></ul></li> (which creates a submenu) rather than <li><a></a></li>), as does my use of the rest of the PureCSS classes.

[markmatney]

Just in case my proposal is unclear, I went ahead and opened a PR with my proposed changes, and modified my JSFiddle slightly.

Also, to recap:

1. Currently, when a <li class="pure-menu-item pure-menu-has-children"> node gets the pure-menu-selected class set on it, ALL of the descendant <a class="pure-menu-link">s get black text.

2. There are cases where this is undesirable, as I attempt to show with my JSFiddle. Here are a few other examples of hierarchical menus where it doesn't make sense for all descendants of a "selected" item to also be "selected" (and therefore, why this isn't just an issue with my application):

   • Yahoo! Finance, main navbar: https://finance.yahoo.com/personal-finance/two-minute-money
     • Personal Finance > Two Minute Money
   • Facebook help center, left sidebar: https://www.facebook.com/help/267689476916031
     • Photos > Tagging
   • Twitter help center, left sidebar: https://help.twitter.com/en/using-twitter
     • Using Twitter > Tweets
   • Vagrant documentation, left sidebar: https://www.vagrantup.com/docs/cli/init.html
     • Commands (CLI) > init

3. Therefore, I propose the changes in fix "selected" menu item labels in nested menus #708, which would still enable developers to achieve the current behavior if desired (although, I'd even go as far as saying that the current behavior is almost always undesirable).