Мегаменю bootstrap 5 исчезает очень быстро ⇐ Jquery

[Anonymous]

У меня есть раскрывающийся список Bootrap 5 mega, у меня с ним проблема, поскольку он быстро исчезает, когда я пытаюсь выбрать содержимое. Я считаю, что на это влияет CSS, но я просто не могу этого понять. Ссылка https://mdbootstrap.com/docs/standard/e ... mega-menu/
HTML:

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

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


[list]
[*][url=#]
Impact[/i]
[/url]






[b]Interest[/b]

Cars
Houses




[b]Lorem[/b]

Lorem
Lorem




[b]lorem[/b]

lorem
lorem






[/list]

CSS:

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

.dropdown-menu {
width: 100%;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 10px);
padding: 20px;
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:200;
}

.dropdown-hover>.dropdown-toggle:active {
pointer-events: none;
}

.dropdown .dropdown-menu a {
font-size: 13px !important;
margin-left: -29px;
}
.nav-item {
padding: 0.5rem 0xp;
}

.dropdown-menu .container{
margin-bottom: -30px;
}

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

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