Problem in der Navigationsleiste aufgrund der Position des Textauswahlrechtecks ​​und des Dropdown-Menüs ⇐ HTML

[Anonymous]

Ich erstelle eine Navigationsleiste, aber ich habe ein Problem, wenn ich die Maus über ein Element (zum Beispiel auf der Firma) übertrage, um das Dropdown-Menü unten anzuzeigen. Zu nahe an "Firma" positioniert (fast so, als würde ich es unterstreichen), möchte ich das grüne Rechteck viel niedriger und genau am unteren Rand der Marine positionieren. Folglich möchte ich auch das Dropdown-Menü verbessern, da es zu viel darüber positioniert und die Navigationsleiste überlappt. The result I would like to obtain is this:


I think the problem is related to:

• padding and margin of the Naval; < /li>
  Polsterung und Rand der Navigationsartikel (vielleicht konflikt sie in Konflikt) < /li>
  Zeilenhöhe; < /li>
  < /ul>
  oder vielleicht ist das Problem etwas anderes, ich kann es nicht lösen. class = "snippet-code">

  Code: Select all

  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";
  });
  });
  });< /code>
  * {
  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;
  }
  }< /code>
  
  
  
  
  
  [url=#]
  [img]img/...[/img]
  
  AAAAAAA
  XXXX
  
  [/url]
  
  
  
  
  
  
  [url=#]COMPANY[/url]
  
  [url=#]
  [img]...[/img]
   Example 1[/url]
  [url=#]
  [img]...[/img]
    Example 2[/url]
  [url=#]
  [img]...[/img]
   Example 3[/url]
  
  [*][url=#]Item 2[/url]
  [*][url=#]Item 3[/url]
  [*][url=#]Item 4[/url]
  [*][url=#]Item 5[/url]
  [*][url=#]Item 6[/url]
  [*][url=#]Item 7[/url]
  [*][url=#]Item 8[/url]
  [/list]