Is there a way to keep a dropdown menu displayed for a short period after hovering off a logo? I'm facing difficulty accessing the menu as it disappears immediately when I move my cursor away. (https://i.sstatic.net/ydqad.jpg)
I've been searching for a solution without success. All sources suggest using the CSS properties transition and transition delay, but implementing them doesn't seem to resolve the issue.
.dropdown:hover>.dropdown-menu{
transition: .5s all;
transition-delay: 5s;
display: block;
} <!-- NAVBAR -->
<nav class="navbar fixed-top">
<div class="nav-logo dropdown">
<svg>
LOGO GOES HERE
</svg>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</nav> The expected behavior is for the dropdown menu to remain visible for approximately 5 seconds after hovering off, but currently, it does not happen as intended.