Currently, on a website project that I'm developing, there is a submenu nested within another submenu. Interestingly enough, the level-2 submenu happens to be taller than its parent level-1 submenu. To control the visibility of these submenus, I've utilized CSS to dictate that when hovering over the parent list item of the level-1 submenu or the level-1 submenu itself, it should remain visible. This logic is repeated for the level-2 submenu as well. However, upon exiting the bounds of the level-1 submenu, it appears that the pointer events for the level-2 items are no longer being detected.
To witness this behavior firsthand, you can visit the work-in-progress staging site (please excuse the rough appearance as styling is still in progress):
Hovering over categories like "All Categories" and "Native American Artifacts," then attempting to select a submenu item further down the list causes the entire menu to disappear abruptly, suggesting that hover events aren't registering properly once outside the bounds of the level-1 submenu.
- In Safari, hover events for level-2 submenus do not seem to register at all.
- In Chrome, hover events for level-2 submenus vanish upon leaving the boundaries of level-1.
- In Firefox, the submenus behave as expected and remain open while hovered over.
It's worth noting that I'm not using `display:none` to hide submenus before revealing them; rather, I'm employing a combination of `opacity`, `visibility`, and `pointer-events:none` to enable smooth fading transitions. I bring this up because I suspect that maybe my use of `pointer-events` is causing some complications, although I fail to see how that could be the case.
Here's a simplified snippet of the CSS I'm working with:
.sub-menu-level-1 {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
li:hover > .sub-menu-level-1,
li > .sub-menu-level-1:hover {
opacity: 1;
visibility: visible;
pointer-events: initial;
}
Is there something obvious I'm missing here, or is this perhaps a browser-specific issue?
My preference would be to avoid introducing JavaScript into the mix if possible; I personally believe that such functionality shouldn't require additional scripting...
I've scoured through every aspect related to `pointer-events:none`, overflow properties, z-index conflicts, and more...
Below are excerpts of the actual CSS and HTML code:
.menu-wrapper {
/* Styles omitted for brevity */
}
/* HTML markup removed for clarity */
The expectation is that applying `.item:hover` should trigger corresponding styles during the hover event... right??