I’m having trouble figuring out why, when I hover over the “Conditions” menu and the dropdown appears, the first item — “Vascular Malformations” — disappears before I can move the cursor down to “Arteriovenous Malformations.”
It seems like as soon as I move the mouse into the “Treatment” div, the navigation skips to the next main menu item.
See screenshot below, when the cursor hovers into the circled area, the next dropdown opens.
Thanks for looking into this! It's hard to explain without a screen recording.
Basically, if you go to https://vascularbirdev.wpenginepowered.com/ and hover over "Conditions", and move your curser to "Vascular Malformations", if you move your cursor to the top right corner of "Vascular Malformations", you'll jump to the menu item next to it, "Botox".
Another way to explain it is if you look at the attached screenshot. When the cursor is in the "Vascular Malformations" menu item but moves into the part of the blue highlight that is actually "Treatments," you jump into the Treatments section of the nav.
I had a developer friend of mine look at it, and this is his explanation: The z-index of the main menu hover listener is higher than the submenu listeners, so when you hover over the part of the submenu that is above the adjacent menu item, it opens the adjacent menu item's submenu instead.
We'd love for this to get fixed because we want to use the "Bottom of Header Navigation Bar" nav style more!
Thank you for your detailed explanation and the screenshot. I have tested the menu behavior on the site but was not able to reproduce the exact issue you described where hovering over the submenu causes it to jump prematurely to the adjacent menu item.
Sometimes such behavior can be influenced by browser-specific quirks or conflicts with custom scripts or plugins. I recommend trying the following to rule out common causes:
Test the menu in different browsers and devices to see if the issue persists consistently.
Clear your browser and site caches.
Temporarily disable any custom JavaScript or third-party plugins that might affect menu interactions.
Ensure your theme and plugins are fully updated.
To help prevent possible overlapping hover areas between main menu items and submenus, you can try adding this custom CSS in Salient > General Settings > CSS/Script Related, which adjusts z-index and padding to ensure submenus appear above main menu items and reduce overlapping hover zones:
/* To ensure submenus appear above main menu items */
.scrolled-down .sf-menu ul.sub-menu {
position: absolute;
z-index: 1002;
pointer-events: auto;
}
/* To prevent main menu items from overlapping submenus */
.scrolled-down .sf-menu > li {
z-index: 1001;
position: relative;
}
/* Optional: To reduce bottom padding on main menu links */
.scrolled-down .sf-menu > li > a {
padding-bottom: 10px; /* Adjust to your preference as needed */
}
Clear caches, and test the menu behavior again.
Let me know if the issue persists or if you can provide a screencast for further analysis.
I’m having trouble figuring out why, when I hover over the “Conditions” menu and the dropdown appears, the first item — “Vascular Malformations” — disappears before I can move the cursor down to “Arteriovenous Malformations.”
It seems like as soon as I move the mouse into the “Treatment” div, the navigation skips to the next main menu item.
See screenshot below, when the cursor hovers into the circled area, the next dropdown opens.
Attached files: Screenshot 2025-06-05 at 10.52.35 AM.png
Hello Alex,
Thank you for getting back.
I have tried to reproduce the same error you are explaining but I couldn't trace it as the functionality works seamlessly.
Kindly retry and get in touch in case of any noticed failures.
Best regards.
Thanks for looking into this! It's hard to explain without a screen recording.
Basically, if you go to https://vascularbirdev.wpenginepowered.com/ and hover over "Conditions", and move your curser to "Vascular Malformations", if you move your cursor to the top right corner of "Vascular Malformations", you'll jump to the menu item next to it, "Botox".
Another way to explain it is if you look at the attached screenshot. When the cursor is in the "Vascular Malformations" menu item but moves into the part of the blue highlight that is actually "Treatments," you jump into the Treatments section of the nav.
I had a developer friend of mine look at it, and this is his explanation: The z-index of the main menu hover listener is higher than the submenu listeners, so when you hover over the part of the submenu that is above the adjacent menu item, it opens the adjacent menu item's submenu instead.
We'd love for this to get fixed because we want to use the "Bottom of Header Navigation Bar" nav style more!
Attached files: Screenshot 2025-06-06 at 9.29.47 AM.png
Hello Alex,
Thank you for your detailed explanation and the screenshot. I have tested the menu behavior on the site but was not able to reproduce the exact issue you described where hovering over the submenu causes it to jump prematurely to the adjacent menu item.
Sometimes such behavior can be influenced by browser-specific quirks or conflicts with custom scripts or plugins. I recommend trying the following to rule out common causes:
To help prevent possible overlapping hover areas between main menu items and submenus, you can try adding this custom CSS in Salient > General Settings > CSS/Script Related, which adjusts z-index and padding to ensure submenus appear above main menu items and reduce overlapping hover zones:
/* To ensure submenus appear above main menu items */ .scrolled-down .sf-menu ul.sub-menu { position: absolute; z-index: 1002; pointer-events: auto; } /* To prevent main menu items from overlapping submenus */ .scrolled-down .sf-menu > li { z-index: 1001; position: relative; } /* Optional: To reduce bottom padding on main menu links */ .scrolled-down .sf-menu > li > a { padding-bottom: 10px; /* Adjust to your preference as needed */ }Clear caches, and test the menu behavior again.
Let me know if the issue persists or if you can provide a screencast for further analysis.
Best regards.