Bootstrap 5 navbar .dropdown-menu-end class not working with hover

Question

I have a simple Bootstrap navbar with right aligned dropdowns, but when I change the trigger to hover, the .dropdown-menu-end class doesn't work.

I've tried css for the hover:

.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

as well as js:

$('.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');
    }
 });

They both result in the dropdown being aligned to the left. I was assuming it had something to do with the display: block to trigger the hover but haven't been able to figure that out.

https://codepen.io/as-miller/pen/eYQvmOq

Answer 1

The critical bit of CSS that's not being applied with your custom event listener is this:

.dropdown-menu-end[data-bs-popper] {
    right: 0;
    left: auto;
}

This is because that attribute isn't being set by the Bootstrap component. You can add it to your stylesheet:

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    right: 0;
    left: auto;
}