To ensure smooth navigation, it's important to have the hovered element positioned next to the dropdown menu. This way, transitioning from one to the other will not cause any interruptions.
Here are some code snippets for achieving this:
.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: stretch;
}
.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;
height: 100%;
}
.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 Styles */
.dropdown-menu {
width: 980px;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%);
opacity: 0;
visibility: hidden;
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: 250;
}
.dropdown-hover>.dropdown-toggle:active {
pointer-events: none;
}
.dropdown .dropdown-menu a {
font-size: 13px !important;
margin-left: -29px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css"/>
<header id="alaid-header" class="d-flex align-items-stretch bg-white shadow header">
<div class="container d-flex justify-content-between align-items-center">
<div class="logo">
<h1 class="text-light">
<a href="index.php">
<img src="https://via.placeholder.com/50" class="w-100" />
</a>
</h1>
</div>
<nav id="navbar" class="navbar alaid-navbar align-items-stretch p-0 h-100">
<ul>
<li><a class="nav-link active" href="index.php">Home</a></li>
<li class="nav-item dropdown-hover position-static">
<a data-mdb-dropdown-init class="nav-link" href="#" id="navbarDropdown" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
Lorem ipsum<i class="bi bi-chevron-down"></i>
</a>
<div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="border-top-left-radius: 0;border-top-right-radius: 0;">
<div class="container mx-0">
<div class="row my-4">
<div class="col-md-6 col-lg-6 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<h6><strong>Lorem3</strong></h6>
<hr />
<a href="">lorem ipsum eer</a>
<a href="">lorem ipsum</a>
<a href="">lorem emsm</a>
</div>
</div>
<div class="col-md-6 col-lg-6 mb-3 mb-lg-0">
<div class="list-group list-group-flush">
<h6><strong>Dogs</strong></h6>
<hr />
<a href="">Caucaian</a>
<a href="">Bull</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
</div>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>