Basically you need this:

.page-item-has-children:hover .header-menu {
	visibility: visible;

	&.faded {
		opacity: 1;
	}
}

And then do something to make that not happen when js is enabled (probably just wrap it in the client-nojs class).

Change 287998 had a related patch set uploaded (by Jack Phoenix):
Top bar (#header-wrapper) menus should be usable without JavaScript

https://gerrit.wikimedia.org/r/287998

.client-nojs #user-info:hover .header-menu,
.client-nojs .page-item-has-children:hover .header-menu {
	visibility: visible;
}
.client-nojs #user-info:hover .header-menu.faded,
.client-nojs .page-item-has-children:hover .header-menu.faded {
	opacity: 1;
}

Add a thing for the user menu and without less, I guess this?

@LegoFan4000 why did you mark this security?

Because volker kept removing a project that did not need to be removed.

How does that make it security-sensitive?

It doesn't. @LegoFan4000, don't misuse the security bug feature.

Hi @LegoFan4000 thanks for your contribution. The Accessibility tag collects the tasks that have impact on people with disabilites. Non-JavaScript support does not fall under this category. Please support developers by letting them focus on their field of expertise.

The proposed CSS from earlier would trigger the dropdowns on hover, as opposed to on click.

Here are two alternatives that trigger on click:

https://koen.kivits.com/articles/pure-css-menu/
http://designhooks.com/how-to-create-pure-css-dropdowns-without-javascript/

Bump.

@SamanthaNguyen @ashley Personally I wouldn't mind it if the dropdowns opened on hover, would you? Of course this would cause issues on mobile. How should we go forward?

Hover actuation of the dropdown menus wouldn't be bad on mobile especially with smooth transitions. I actually tried this a long time ago but the primary reason we never implemented it that way was because of mobile support. However since Refreshed 3.x the way mobile menus are handled was meant to be improved so perhaps this idea is worth revisiting.

Yeah imo that'd be a good thing to look into. Maybe if we implement hover dropdowns we could use the checkbox hack as well to cover our bases for mobile?

In T134851#4425470, @MtMNC wrote:

@SamanthaNguyen @ashley Personally I wouldn't mind it if the dropdowns opened on hover, would you? Of course this would cause issues on mobile. How should we go forward?

Nope, I wouldn't mind it. That being said, of course we don't want to break the mobile view, given that mobile is a significant portion of the user base these days (some sites even have more mobile users than "desktop" users!).

As always, patches are welcome. :-) My proposed patch (which doesn't apply cleanly anymore) fixes parts of this bug but since it didn't fix the issue fully, it wasn't merged. If we can get this issue fixed by refactoring the menus, all the better!

Change 287998 abandoned by Jack Phoenix:
Top bar (#header-wrapper) menus should be usable without JavaScript

Reason:
This doesn't appear to be needed since 62f0088a51d531a257efa4912f68b11a4a102b6e either, yay!

https://gerrit.wikimedia.org/r/287998