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.
That CSS you gave us didn't resolve the issue. I would like this looked at again.
To recap, when "Header Dropdown Positioning" is set to "Bottom of Menu Item Label", there is a bug with the first item in the dropdown where if you're cursor enters the blue space in the screenshot below, you get jumped to the dropdown to the right of where you want to be.
This is occurring on https://vascularbirdev.wpenginepowered.com/, which is a dev environment. If it helps, I can provide a WP Admin logon for you to take a look at the backend.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
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.
Salient Theme Support
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.
Salient Theme Support
Hi Alex,
I trust the solution we shared resolved the issue, and I'll go ahead and close this ticket.
If you experience any further challenges, please don't hesitate to reach out to us.
Best wishes,
Salient Theme Support
Hi there,
That CSS you gave us didn't resolve the issue. I would like this looked at again.
To recap, when "Header Dropdown Positioning" is set to "Bottom of Menu Item Label", there is a bug with the first item in the dropdown where if you're cursor enters the blue space in the screenshot below, you get jumped to the dropdown to the right of where you want to be.
This is occurring on https://vascularbirdev.wpenginepowered.com/, which is a dev environment. If it helps, I can provide a WP Admin logon for you to take a look at the backend.
Attached files: Screenshot 2025-07-28 at 10.10.39 AM.png
Hi Again,
Thanks for reaching out! .
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.sfHover.menu-item-over { z-index: 10000 !important; }Thanks
Salient Support Team