While working on creating a navbar, I encountered an issue when hovering over an item (such as "Company") to display the dropdown menu below.
https://i.sstatic.net/KbuwLPGy.png
The problem lies in the positioning of the green selection rectangle, which is currently too close to "Company," almost appearing as if it's underlining it. My desired placement for the green rectangle is much lower, precisely at the lower edge of the navbar. Additionally, I aim to improve the drop-down menu positioning, as it seems to overlap the navbar. The desired result is shown here:
https://i.sstatic.net/rADAHVkZ.png
I suspect the issue could be related to:
- The padding and margin of the navbar;
- The padding and margin of the navbar items (potential conflicts);
- The line-height; or
Other possible factors that I haven't identified yet.
document.addEventListener("DOMContentLoaded", function () {
const dropdowns = document.querySelectorAll(".nav-item.dropdown");
dropdowns.forEach(dropdown => {
dropdown.addEventListener("mouseenter", function () {
const menu = this.querySelector(".dropdown-menu-horizontal");
if (menu) menu.style.display = "flex";
});
dropdown.addEventListener("mouseleave", function () {
const menu = this.querySelector(".dropdown-menu-horizontal");
if (menu) menu.style.display = "none";
});
});
});Thank you for your help!