I'm creating a navbar but I have a problem when I move the mouse over an item (for example on Company) to display the drop-down menu below.
The problem is that the green selection rectangle is positioned too close to "Company" (almost as if to underline it), instead I would like to position the green rectangle much lower and precisely on the lower edge of the navbar. Consequently I would also like to improve the drop-down menu because it seems to be positioned too much above and overlapping the navbar. The result I would like to obtain is this:
I think the problem is related to:
- padding and margin of the navbar;
- padding and margin of the navbar items (maybe they conflict)
- line-height;
or maybe the problem is something else, i don't know, i can't solve it.
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"; }); });});* { box-sizing: border-box;}/* Navbar */.navbar { background-color: #000033; padding: 0px 0; /* Imposta il padding verticale invece dell'altezza */ display: flex; align-items: center; position: relative; z-index: 1000;}/* Stile logo e testo del brand */.logo { height: 80px; margin-right: 10px;}.brand-text { color: #ffffff; display: flex; flex-direction: column; justify-content: center; text-align: left; line-height: 1;}.fondazione { font-size: 0.80em; font-weight: normal; letter-spacing: 0.28em;}.surname { font-size: 2.4rem; font-weight: bold; letter-spacing: 0.05em;}/* Rettangolino colorato sotto le voci della navbar */.navbar-nav .nav-link { color: #ffffff; margin-right: 10px; padding: 0 10px; /* Gestisce lo spazio tra i link */ line-height: normal; /* Usa la line-height di default */ position: relative;}.navbar-nav .nav-link:hover::after { content: ''; display: block; width: 100%; height: 3px; /* Altezza del rettangolo */ background-color: #459439; position: absolute; bottom: 0; /* Allineato al bordo inferiore */ left: 0; z-index: 1000;}/* Rimozione della freccia dropdown */.nav-link.dropdown-toggle::after { display: none;}/* Dropdown orizzontale */.dropdown-menu-horizontal { display: none; background-color: #000033 !important; padding: 20px !important; min-width: 100%; border-radius: 0; position: absolute; left: 0; top: 100%; z-index: 9999;}.dropdown-item-horizontal { color: #ffffff; display: inline-flex; align-items: center; padding: 10px 20px; margin-right: 30px; white-space: nowrap;}.dropdown-item-horizontal img { width: 50px; height: 50px; margin-right: 15px;}.dropdown-item-horizontal:hover { color: #d4d4ff; text-decoration: none;}/* Mostra il menu a tendina al passaggio del mouse */.nav-item:hover .dropdown-menu-horizontal { display: flex; justify-content: space-around;}/* Responsive per dispositivi mobili */@media (max-width: 768px) { .navbar-expand-md .navbar-nav .nav-link { padding-top: 20px; padding-bottom: 20px; }}<!DOCTYPE html><html lang="it"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Example</title><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="styles.css"></head><body><!-- Navbar con logo e link --><nav class="navbar navbar-expand-md navbar-dark mb-0"><div class="container"><a class="navbar-brand d-flex align-items-center" href="#"><img src="img/..." alt="Logo" class="logo"><div class="brand-text"><span class="fondazione">AAAAAAA</span><span class="surname">XXXX</span></div></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav ml-auto"><li class="nav-item dropdown"><a class="nav-link" href="#" id="fondazioneDropdown">COMPANY</a><div class="dropdown-menu dropdown-menu-horizontal" aria-labelledby="fondazioneDropdown"><a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 1"> Example 1</a><a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 2"> Example 2</a><a class="dropdown-item-horizontal" href="#"><img src="..." alt="Logo 3"> Example 3</a></div></li><li class="nav-item"><a class="nav-link" href="#">Item 2</a></li><li class="nav-item"><a class="nav-link" href="#">Item 3</a></li><li class="nav-item"><a class="nav-link" href="#">Item 4</a></li><li class="nav-item"><a class="nav-link" href="#">Item 5</a></li><li class="nav-item"><a class="nav-link" href="#">Item 6</a></li><li class="nav-item"><a class="nav-link" href="#">Item 7</a></li><li class="nav-item"><a class="nav-link" href="#">Item 8</a></li></ul></div></div></nav><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script><script src="script.js"></script></body></html>Thank you