Ah okay… there are many missing semicolons in your CSS, but I wouldn’t mix the CSS-only solution with your JS approach in the first place – JS is the way to go IMHO as it is much more versatile and easier to address accessibility concerns. So what you’d have to do is setting a timeout for hiding the menu, rather than closing it directly; and also cancel that timeout if the menu is getting hovered again:
var DELAY = 1000
var timeout = null
function showMenu (element) {
$(element).addClass('show').attr('aria-expanded', 'true')
$(element).find('.dropdown-menu').addClass('show')
}
function hideMenu (element) {
$(element).removeClass('show').attr('aria-expanded', 'false')
$(element).find('.dropdown-menu').removeClass('show')
}
$('.dropdown')
.mouseover(function () {
showMenu(this)
// Cancel the delayed closing of the dropdown
window.clearTimeout(timeout)
})
.mouseout(function () {
// Delay the closing of the dropdown to the given
// amount of ms
timeout = window.setTimeout(hideMenu, DELAY, this)
})
You can’t transition visibility. Either its hidden or its not. There is no half state.
You would need to hide the menu off screen to hide it (absolute positioning) in order to add the transition effects. (You can’t use transition with display:none either because there is no mid state. Its either there or its not.)
Here’s an example with a 3 second delay on a dropdown menu.
However with the JS menu you are using you will need the JS version that @m3g4p0p kindly provided