Navigation menu link -> sub-menu hover glitch

Hi,

Although we’ve only recently noticed this issue on our sites using the Total theme, I have the feeling it’s been an issue for a while now and we just hadn’t noticed before this:

— Occasionally (but not consistently) when you hover over a navigation menu link that has a sub-menu, you can’t keep the sub-menu open when you move the mouse down towards the sub-menu; the sub-menu disappears before the mouse can enter the sub-menu element

— This behavior is most common if you click on a top-level navigation menu link (that doesn’t correspond to the current page) and leave the mouse there as the new page loads in the browser (as opposed to moving the mouse around as the page is loading), and then try to move the mouse downward towards the sub-menu from the navigation menu link

— This behavior only goes away entirely if you remove the gap (margin-top) between the sub-menu and navigation menu elements. (We noticed this “fix” when we activated the Total Plus plugin, as “Total Plus” by default seems to remove the gap between the navigation menu links and their sub-menus.) The behavior returns even if you have a gap as small as 2px between the navigation menu element and the sub-menu element. (e.g. custom CSS set to “.ht-menu ul ul { margin-top: 2px; }” to override the default 10px gap. The same is true in Total Plus if you use the “Style” tab to increase the sub-menu spacing beyond 0px.)

— As far as I can tell, this behavior is not caused by other potentially conflicting plugins (we tested on a local site using only the total theme and no plugins activated), and upgrading the Total theme’s version of superfish.js from v1.7.3 to the latest available (v1.7.10) did not resolve the behavior.

— You can see this behavior on the Hash-Themes’ demo Total site <https://demo.hashthemes.com/total/agency/&gt; . The only working sub-menu in that site’s navigation menu is for the “shop” navigation menu link, so you may have to toggle a few times between one of the other navigation menu links and the “Shop” page before noticing the disappearing “Shop” sub-menu when you land on the “Shop” page. (I found that alternately clicking on the “Blog” navigation menu link <https://demo.hashthemes.com/total/agency/blog/&gt; and then the “Shop” navigation menu link <https://demo.hashthemes.com/total/agency/shop/&gt; would eventually show this behavior, usually only taking one or two sets of clicks before the “Shop” sub-menu would disappear as you moved the mouse down towards it from the “Shop” link.

— This seems to be a cross-browser issue, at least for Chrome and Firefox desktop browsers in Windows. I wasn’t able to get much useful information when I set a breakpoint in Chrome’s developer-tools pane on a sub-menu

element, but it seems that the inline “style” attribute on the sub-menu

element was getting reset to style=”” instead of toggling between style=”display: none” and style=”display: block;” when the problem behavior happened.

I wasn’t able to search these forums very well, so my apologies if this has already been asked and answered. And I hope there’s a solution to this (aside from eliminating the menu / sub-menu gap), as we like the way the sub-menus look with that gap!

Thanks for your help with this.