Bootstrap 5导航栏下拉菜单：桌面hover/移动端点击功能修复求助

核心问题分析 #

你的CSS里有两处关键错误导致功能异常：

• 强制给.collapse.navbar-collapse加display: flex，直接覆盖了Bootstrap响应式折叠的逻辑，导致移动端菜单无法通过按钮切换
• 仅用CSS实现hover下拉，但未处理Bootstrap默认的点击触发逻辑，导致下拉菜单点击后会保持展开状态

修复后的完整CSS #

替换你原有的CSS，同时解决移动端和桌面端的问题：

.navbar-wrapper {
    background-color: var(--orange);
}
.nav-container {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 2.5rem;
    height: 5.625rem;
}
.navbar-toggler {
    border-style: none;
}
.navbar-brand {
    padding-top: .85rem;
}
/* 仅在桌面端（lg及以上断点）设置菜单布局，避免破坏移动端折叠逻辑 */
@media (min-width: 992px) {
    .collapse.navbar-collapse {
        justify-content: flex-end;
        display: flex;
    }
    /* 桌面端hover时显示下拉菜单，消除间距跳动 */
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}
.navbar-nav .nav-link {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    padding: .625rem 0.75rem;
    border-radius: 50px;
    transition: background-color 0.3s;
}
.nav-item {
    padding-left: .625rem;
}
.nav-item.active .nav-link{
    background-color: rgba(255,255,255,0.8);
    color: var(--orange) !important;
}
.navbar-nav .nav-link:hover {
    background-color: rgba(255,255,255,0.2);
    color: #fff;
}
.dropdown-menu {
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.dropdown-menu .dropdown-item {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--light-grey);
    transition: color 0.3s;
}
.dropdown-menu .dropdown-item:hover {
    color: var(--orange);
}

修复下拉菜单点击保持展开的问题 #

仅靠CSS无法完全阻止Bootstrap默认的点击触发逻辑，需要添加一段小脚本：

document.addEventListener('DOMContentLoaded', function() {
    const dropdownToggles = document.querySelectorAll('.nav-item.dropdown .nav-link');
    dropdownToggles.forEach(toggle => {
        toggle.addEventListener('click', function(e) {
            // 仅在桌面端阻止下拉按钮的点击行为
            if (window.innerWidth >= 992) {
                e.preventDefault();
                e.stopPropagation();
            }
        });
    });
});

将这段脚本放到主题footer.php的</body>标签前，或者通过WordPress的wp_enqueue_script方法加载。

改动说明 #

1. 移动端修复：把菜单的布局样式放到min-width:992px的媒体查询中，和Bootstrap的navbar-expand-lg断点匹配，保留移动端折叠菜单的原生切换功能。
2. 桌面端下拉修复：hover显示下拉的逻辑仅在桌面端生效，同时脚本阻止桌面端下拉按钮的点击事件，避免Bootstrap添加show类导致菜单保持展开，完美实现仅hover打开的需求。

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