I'm having an issue with my dropdown menu closing quickly on hover and not staying open when I try to click it. I do need some margin as well.
<div class="container mt-5 pt-5 ">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="collapse navbar-collapse ">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link text-danger" href="#" id="Dropdown" role="button"
data-toggle="dropdown">HOVER IT</a>
<div class="dropdown-menu mt-5" aria-labelledby="Dropdown">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
CSS:
.navbar-nav li:hover > .dropdown-menu {
display: block;
transition-delay: 5s;
}