Style TopNav submenus so item text doesn't disappear

[djohnson]

A picture being worth a thousand words:

nested-topnav-menu.png

I'd like the "parent" menu items to always be visible, either by making the intermediate green hover bars go away, or by keeping the yellow color for the text of the no-longer-hovered-yet-still-colored-like-it-is menu item.

I am continuing to experiment with this but I am pretty sure it is hopeless; :focus doesn't work for mouse movement, and there is no :unhover selector.

(And by hopeless I mean CSS-wise; I am willing to bet that JQuery can manage this but I don't know if I want to go there with these elements.)

I just can't figure out why the parents are still retaining their hover color; doesn't seem right!

[djohnson]

As usual, by asking the question I have forced my brain into gear and found "a" or "the" solution.

I was coloring my hovered link text this way:

Code: Select all

ul.navigation ul > li:hover { background-color: #156459; } /* This provides the background color for the list item */
ul.navigation ul > li > a:hover { color: Yellow; }

That is, I was coloring the text when the link was hovered over.

I changed it so that I color the text when the list item is hovered over:

Code: Select all

ul.navigation ul > li:hover { background-color: #156459; } /* This is the same in both cases */
ul.navigation ul > li:hover > a { color: Yellow; }

I still can't figure why the parent menu item <li> doesn't lose it's hover color when I move to the child, but I'm not worried.

[moshe]

See this previous topic, where the work-around that you came up with is discussed: viewtopic.php?f=13&t=26894

The solution is only a work-around. The issue itself is a Flare bug. A bug report about this issue was accepted in January 2017 (#117763 - Bug: Inconsistent Top Nav menu hover color control). I was told by Steve at Flare, "you will be notified via email if a fix for this is included in a future patch or release version".