Bootstrap 4导航栏下拉菜单hover冲突问题求助

你现在碰到的问题其实是因为纯CSS的hover触发逻辑只负责显示当前的下拉菜单，不会主动去关闭其他已经展开的菜单，所以当鼠标移到另一个下拉项上时，多个菜单同时展开就挤在一起了。下面给你两种实用的解决方案，推荐第二种，更贴合Bootstrap组件的原生逻辑：

方案一：CSS+jQuery组合控制 #

先保留你现有的hover样式：

.dropdown:hover>.dropdown-menu {
    display: block;
}

然后在你的function.js里加一段jQuery代码，当鼠标移到某个下拉项时，自动关闭其他所有展开的下拉菜单：

$(document).ready(function() {
    // 鼠标进入下拉项时
    $('.dropdown').hover(function() {
        // 先关掉其他所有下拉菜单
        $('.dropdown').not(this).find('.dropdown-menu').css('display', 'none');
        // 再打开当前的下拉菜单
        $(this).find('.dropdown-menu').css('display', 'block');
    }, function() {
        // 鼠标离开时关闭当前菜单（如果不需要点击后保持打开，就保留这段）
        $(this).find('.dropdown-menu').css('display', 'none');
    });
});

另外提个小问题：你HTML里所有下拉链接的id="navbarDropdown"是重复的，HTML要求id必须唯一，建议改成navbarDropdownProducts、navbarDropdownServices这种不同的id，避免后续出现奇怪的bug。

方案二：纯JS控制hover事件（更推荐） #

这种方式可以去掉你原来的CSS hover规则，完全用JS来管理菜单的显示隐藏，更贴合Bootstrap的组件状态：
先删掉你写的.dropdown:hover>.dropdown-menu CSS，然后在function.js里加这段代码：

$(document).ready(function() {
    // 绑定鼠标进入下拉项的事件
    $('.dropdown').on('mouseenter', function() {
        // 关闭其他所有下拉菜单，同时更新原生属性
        $('.dropdown').not(this).each(function() {
            $(this).find('.dropdown-menu').removeClass('show');
            $(this).find('.dropdown-toggle').attr('aria-expanded', 'false');
        });
        // 打开当前下拉菜单，同步更新状态
        $(this).find('.dropdown-menu').addClass('show');
        $(this).find('.dropdown-toggle').attr('aria-expanded', 'true');
    }).on('mouseleave', function() {
        // 鼠标离开时关闭当前菜单，恢复状态
        $(this).find('.dropdown-menu').removeClass('show');
        $(this).find('.dropdown-toggle').attr('aria-expanded', 'false');
    });

    // 可选：如果希望点击下拉菜单里的链接后，菜单保持打开，就加这段
    $('.dropdown-item').on('click', function(e) {
        e.stopPropagation();
    });
});

这种方式的好处是完全遵循Bootstrap下拉组件的原生状态（比如更新aria-expanded无障碍属性，使用官方的show类），不会出现样式冲突，而且能确保同一时间只有一个下拉菜单展开。

额外小提醒 #

• 记得修改重复的id，比如把Products下拉的id改成navbarDropdownProducts，Services的改成navbarDropdownServices，以此类推，这是HTML的基本规范，能避免很多潜在问题。
• 确保你的function.js是在Bootstrap JS之后引入的，这样jQuery已经加载完毕，代码才能正常运行。

这样调整后，当你鼠标悬停到新的下拉链接时，之前展开的菜单就会自动关闭，再也不会出现重叠的情况啦～

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