CSS: Как расширить раскрывающееся меню на панели навигации по горизонтали по ширине контейнера страницы? ⇐ CSS

[Anonymous]

В настоящее время при наведении курсора на элемент на панели навигации открывается вот такое горизонтальное раскрывающееся меню (обратите внимание на ширину раскрывающегося меню):


Чего бы я хотел достичь?
Я хотел бы расширить раскрывающееся меню по горизонтали, как на следующем фото, но только в настольной версии. Я бы хотел, чтобы раскрывающееся меню было такой же ширины, как контейнер (тот, который Bootstrap уже использует с классом контейнера), который я уже использую в своей навигационной панели и который я также буду использовать по всему сайту.
На фотографии (фотомонтаж/коллаж) я проверяю панель навигации с помощью Chrome, чтобы выделить контейнер панели навигации, чтобы дать вам представление о том, насколько широким я хотел бы видеть раскрывающееся меню.
/>


Можете ли вы мне помочь и показать, как это сделать? чтобы получить это? Я предпринял несколько попыток, но мне это не удалось.
style.css:

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

* {
box-sizing: border-box;
}

/* Navbar */
.navbar {
background-color: #000033;
padding: 0 !important; /* Imposta il padding verticale invece dell'altezza */
display: flex;
align-items: center;
position: relative;
z-index: 1000;
box-sizing: border-box;
}

/* 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;
height: 100%;
display: flex;
align-items: center;
}

.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: 97% !important;
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;
}
}

index.html:

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

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]

script.js:

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

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

Спасибо

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