CSS: проблема в панели навигации из-за положения прямоугольника выделения текста и раскрывающегося меню. ⇐ CSS

[Anonymous]

Я создаю панель навигации, но у меня возникла проблема, когда я наводил указатель мыши на элемент (например, «Компания»), чтобы отобразить раскрывающееся меню ниже.


Проблема в том, что зеленый прямоугольник выделения расположен слишком близко на «Компания» (почти как бы подчеркивая ее), вместо этого я хотел бы расположить зеленый прямоугольник намного ниже и точно на нижнем краю навигационной панели. Следовательно, я также хотел бы улучшить раскрывающееся меню, поскольку оно, кажется, расположено слишком высоко и перекрывает панель навигации. Результат, который я хотел бы получить, следующий:


Я думаю, проблема связана с:

• отступами и полями навигационной панели;
• отступы и поля элементов навигационной панели (возможно, они конфликтуют)
• line-height;

или, может быть, проблема в чем-то другом, я не знаю, я не могу ее решить.

Код: Выделить всё

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;
}
}

Код: Выделить всё

Example
[*]







[url=#]
[img]img/...[/img]

AAAAAAA
XXXX

[/url]




[list]

[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]

Спасибо

Подробнее здесь: https://stackoverflow.com/questions/791 ... -rectangle