Bootstrap 5顶部导航栏下拉菜单无法点击链接、hover无响应求助

问题根因 #

该问题是典型的层叠上下文（Stacking Context）层级冲突导致的：

• 你的#top-bar和#main-content都是fixed定位元素，且都未设置z-index属性
• 相同定位类型、无z-index的元素，层叠顺序由HTML代码的书写顺序决定，写在后面的#main-content层级会高于写在前面的#top-bar
• Bootstrap下拉菜单的z-index仅在父容器的层叠上下文内生效，父容器#top-bar整体被#main-content遮挡，所以你看到的下拉菜单实际处于被遮挡状态，鼠标操作实际触发的是上层#main-content的事件，自然无法和菜单项交互。而放在#main-content内的下拉菜单父容器层级足够，所以可以正常使用。

修复方案 #

只需要在你的Sass代码中给#top-bar添加足够高的z-index属性，确保它的层级高于#main-content即可，参考修改如下：

#top-bar
    position: fixed
    top: 0
    right: 0
    width: calc( 100vw - 260px )
    height: 50px
    background-color: #0984e3
    z-index: 1001 /* 新增此行，数值只要大于侧边栏的1000即可，也可以根据自己的层级规则调整 */

额外优化建议 #

你当前代码中存在两处重复的id="dropdown_user"，不符合HTML规范，可能会导致后续JS选择元素、ARIA无障碍属性匹配出错，建议将两个下拉菜单的id改为不同值，比如dropdown_user_top和dropdown_user_main，同时对应修改aria-labelledby属性的值。

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