Как сделать навигационную панель Bootstrap 5.2 с раскрывающимся меню «мега-меню»? ⇐ CSS

[Anonymous]

Я пытаюсь создать новую панель навигации для своего бизнес-сайта, но ни в коем случае не могу заставить ее работать так, как мне хочется...
Я хотите иметь раскрывающиеся списки «мега-меню» (при наведении), которые охватывают ВСЮ ширину экрана (Без меню, выходящего за край экрана).
В этом примере меню являются мега, но они выходят за пределы экрана: https://jsfiddle.net/Brnd13/fyaL50w9/64/
Может кто-нибудь помочь мне с этим?
Спасибо.

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

/* Full Width Mega Dropdown */
.mega-dropdown {
position: fixed; /* Fixes the dropdown to the viewport */
top: 100%; /* Position it below the navbar */
left: 0; /* Align with the left edge of the screen */
right: 0; /* Align with the right edge of the screen */
width: 100vw; /* Make the dropdown span the full width */
padding: 1rem;
background-color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1050;
display: none; /* Hidden by default */
}
.cstm-menu-link{
display:block;
}

/* Display dropdown on hover */
.nav-item.dropdown:hover .mega-dropdown {
display: block;
}

/* The row within the mega dropdown */
.mega-dropdown .row {
margin: 0; /* Remove margin */
width: 100%; /* Ensure it spans the full width */
display: flex; /* Make sure the columns align properly */
}

/* Adjust padding for each column */
.mega-dropdown .row .col-md-4 {
padding: 15px; /* Adjust padding for spacing between columns */
}

/* Remove the default margins and paddings of links */
.mega-dropdown ul {
list-style: none;
padding: 0;
margin: 0;
}

.mega-dropdown ul li a {
display: block;
color: #007bff;
text-decoration: none;
padding: 0.5rem 0;
}

.mega-dropdown ul li a:hover {
text-decoration: underline;
}

/* Remove any borders for a clean look */
.navbar-nav .dropdown-menu {
padding: 0;
margin-top: 0;
border: none;
}

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

[*]



[url=#]Brand[/url]





Menu


[list]

[url=#]Home[/url]

[*]
[url=#]
Tools &  Equipment
[/url]



Tools
[url=#]Browse All[/url]
[url=#]Screwdrivers[/url]
[url=#]Spudgers[/url]
[url=#]Suction Cups[/url]

Equipment
[url=#]Browse All[/url]
[url=#]Pre-heating Devices[/url]
[url=#]Mounts/Holders[/url]
[url=#]Adhesives[/url]

Adhesives
[url=#]Browse All[/url]
[url=#]iPhone Adhesive Seals[/url]
[url=#]iPad Adhesive Seals[/url]
[url=#]Glues[/url]




[*]
[url=#]
Parts &  C o m p o n e n t s < b r   / >                         & l t ; / a & g t ; < b r   / >                         & l t ; d i v   c l a s s = " d r o p d o w n - m e n u   m e g a - d r o p d o w n "   a r i a - l a b e l l e d b y = " p a r t s D r o p d o w n " & g t ; < b r   / >                             & l t ; d i v   c l a s s = " r o w " & g t ; < b r   / >                                 & l t ; d i v   c l a s s = " c o l - m d - 4 " & g t ; < b r   / >                                     & l t ; h 5 & g t ; S m a r t P h o n e s & l t ; / h 5 & g t ; < b r   / >                           Browse All[/url]
[url=#]Replacement Screens[/url]
[url=#]Batteries[/url]
[url=#]Speaker/Microphone[/url]


Tablets
[url=#]Browse All[/url]
[url=#]Replacement Screens[/url]
[url=#]Batteries[/url]
[url=#]Speaker/Microphone[/url]

Game Consoles
[url=#]Browse All[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]




[*]
[url=#]
Accessories
[/url]



SmartPhones
[url=#]Browse All[/url]
[url=#]Replacement Screens[/url]
[url=#]Batteries[/url]
[url=#]Speaker/Microphone[/url]

Tablets
[url=#]Browse All[/url]
[url=#]Replacement Screens[/url]
[url=#]Batteries[/url]
[url=#]Speaker/Microphone[/url]

Game Consoles
[url=#]Browse All[/url]
[url=#]Link 2[/url]
[url=#]Link 3[/url]




[*]
[url=#]
About Us
[/url]



About
[url=#]About Us[/url]
[url=#]Our Goals[/url]
[url=#]Link 3[/url]

Our Reviews
[url=#]All Reviews[/url]

Blog
[url=#]Disclaimers[/url]
[url=#]Website Updates[/url]
[url=#]Our Work[/url]




[/list]

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