Мегаменю Bootstrap 5 быстро исчезает ⇐ CSS

[Anonymous]

У меня есть мега-раскрывающийся список Bootstrap 5, у меня с ним проблема, поскольку он быстро исчезает, когда я пытаюсь выбрать содержимое. Я полагаю, что на это влияет CSS, но просто не могу этого понять.
Я пробовал увеличить время перехода и увеличить значение z-индекса, но безрезультатно. Я не могу понять, какое свойство CSS мне нужно добавить, чтобы эффект наведения сохранялся.

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

.header {
min-height: 70pt;
}

#alaid-header .logo h1 {
font-size: 38px;
margin: 0;
line-height: 0;
font-weight: 600;
letter-spacing: 1px;
}

#alaid-header .logo h1 a,
#alaid-header .logo h1 a:hover {
color: #3c4133;
text-decoration: none;
}

#alaid-header .logo img {
padding: 5px;
margin: 0;
max-height: 78px;
}

.navbar {
padding: 0;
}

.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}

.navbar li {
position: relative;
}

.navbar a {
color: #026a3f !important;
}

.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
white-space: nowrap;
transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #c57b0d !important;
}

.navbar a i {
color: #c57b0d !important;
}

/* dropdown 2 */

.dropdown-menu {
width: 980px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 15px);
/* z-index: 99; */
opacity: 0;
visibility: hidden;
padding: 20px;
/* background-color: #fff;  */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: all 5s ease;
}

.dropdown-hover:hover>.dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
z-index: 250;
}

.dropdown-hover>.dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}

.dropdown .dropdown-menu a {
font-size: 13px !important;
margin-left: -29px;
}

.nav-item {
padding: 0.5rem 0xp;
}

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

[*]





[url=index.php]
[i]
[/url]



[list]
[url=index.php]Home[/url]
[*]
[url=#]
Lorem ipsum[/i]
[/url]






[b]Lorem3[/b]

lorem ipsum eer
lorem ipsum
lorem emsm




[b]Dogs[/b]

Caucaian
Bull






[/list]

[i][/i]

Подробнее здесь: https://stackoverflow.com/questions/790 ... rs-quickly