My Bootstrap navbar has right-aligned dropdowns, but when I try changing the trigger to hover, the .dropdown-menu-end class doesn't work as expected.
I attempted using CSS for the hover effect:
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
and also tried using JavaScript:
$('.dropdown').mouseover(function () {
if($('.navbar-toggler').is(':hidden')) {
$(this).addClass('show').attr('aria-expanded', 'true');
$(this).find('.dropdown-menu').addClass('show');
}
}).mouseout(function () {
if($('.navbar-toggler').is(':hidden')) {
$(this).removeClass('show').attr('aria-expanded', 'false');
$(this).find('.dropdown-menu').removeClass('show');
}
});
However, both methods resulted in the dropdown aligning to the left. I suspect it may be related to the use of display: block to trigger the hover effect, but I haven't been able to solve this issue yet.