Bootstrap 5中.dropdown-menu-end类hover触发时失效问题

问题核心：Bootstrap的.dropdown-menu-end右对齐样式依赖父元素.dropdown的.show类激活——默认点击触发时，框架会自动给父元素和下拉菜单加上.show类，从而应用right:0、left:auto的定位规则。你用CSS直接设置display:block时，未触发这些定位样式；JS实现里的mouseover/mouseout事件易引发冒泡问题，导致样式未正确生效。

方案1：CSS直接修复 #

在hover触发时，手动补上.dropdown-menu-end需要的定位规则：

/* 全局生效 */
.dropdown:hover .dropdown-menu.dropdown-menu-end {
  display: block;
  margin-top: 0;
  right: 0;
  left: auto; /* 覆盖默认左对齐 */
}

/* 仅桌面端（Bootstrap默认断点）生效 */
@media (min-width: 992px) {
  .dropdown:hover .dropdown-menu.dropdown-menu-end {
    display: block;
    margin-top: 0;
    right: 0;
    left: auto;
  }
}

方案2：优化JS实现 #

替换事件为mouseenter/mouseleave（避免子元素触发父元素的mouseout事件），确保.show类正确添加：

$('.dropdown').mouseenter(function () {
    if($('.navbar-toggler').is(':hidden')) {
        $(this).addClass('show').attr('aria-expanded', 'true');
        $(this).find('.dropdown-menu').addClass('show');
    }
}).mouseleave(function () {
    if($('.navbar-toggler').is(':hidden')) {
        $(this).removeClass('show').attr('aria-expanded', 'false');
        $(this).find('.dropdown-menu').removeClass('show');
    }
 });

内容的提问来源于stack exchange，提问作者amiller