Selecting :hover doesn't activate the hover effect on certain mega menus (Ubermenu, on Wordpress)

Developer Tools
#1

I suspect this is a bug, but I wanted to first find out what others’ thoughts are on it.

I am working on a Wordpress site which makes use of a plug-in called Ubermenus. It’s basically a “mega menu” generator.

When I am using the inspector in Google Chrome, I can activate the :hover option (for one of the menu elements), and the menu will drop down and display. I can then make changes to the underlying CSS and see the effects on the menu that’s being held in its hover state.

When I try to do the same thing on FF dev edition, the menu does not drop down after activating the :hover option.

You can see what I mean, by testing this here: https://wpmegamenu.com/

Inspect any of the menu items in their main menu (e.g, “MEGA MENUS” or “IMAGES”).

Select the :hov > :hover option in the Rules inspector. In my case, this has no effect on the menu. It does not get activated, and does not stick into being displayed. I do not have this issue on Chrome.

Any thoughts?

#2

Hmm, this is odd.

I use NoScript so when I open a site that hasn’t previously been allowed, its scripts are disabled. In that configuration, the hover checkbox works (for the li or the a element). The background color changes for the menu heading and the detail panel animates into view.

When I enable scripts for the site, the background color still changes for the menu heading, but the detail panel does not appear. I notice that a user interactive hover triggers a script in the page to add an additional class name, but I don’t know whether that is relevant – it’s probably just the tip of the iceberg.

In Chrome 85, I get the same behavior as Firefox with scripts enabled: detail panel does not appear.

#3

Thanks for your input.

What’s also odd, for me, is I was able to activate it numerous times in Chrome, and also with Firefox on my live site (a few days, but then not again). Chrome seemed consistent, but some time after submitting my above post, I was not able to activate it with Chrome. I couldn’t make sense of this inconsistency. I am now wondering if something broke (failed to load) in the JS department, on the times when the :hover option worked.

I also see the background color changing. Although the actual drop-down mega menu does not activate/appear. I assume that’s what you’re referring to as the “detail panel”.

As a workaround, I will install NoScript. As it’s very hard to do live changes to a drop-down menu when I can’t see it.

UPDATE: I can confirm that NoScript ‘resolves’ the issue. It would be nice if NoScript would display the scripts it has disabled, and let me ‘allow’ them one-by-one.