无法选中下拉列表第三个元素的技术问题咨询

你遇到的下拉菜单失效问题，核心原因大概率是自定义样式与Bootstrap的Navbar组件冲突，或者是子菜单的布局细节导致hover状态中断，以下是具体的排查和修复方案：

一、核心问题分析 #

你的代码在demo中正常，但在引入Bootstrap的网页中失效，主要因为：

1. Bootstrap的Navbar自带默认样式和交互逻辑，会覆盖或干扰你自定义的下拉菜单样式；
2. 子菜单与父元素之间存在隐形间隙，鼠标移动时会离开父元素的hover范围，导致菜单消失；
3. 子菜单的z-index层级不足，被页面其他元素覆盖。

二、修复方案 #

1. 提升自定义样式优先级 #

将所有自定义菜单的选择器加上#menu前缀，确保优先级高于Bootstrap的默认样式：

#menu .parent {
    display: block;
    position: relative;
    float: right;
    line-height: 50px;
    background-color: #a9cc77;
    border-right: #CCC 1px solid;
}

#menu .parent a {
    margin: 10px;
    color: #000;
    text-decoration: none;
    font-weight:bold;
}

#menu .parent:hover > ul {
    display: block;
    position: absolute;
    top: 100%; /* 让子菜单紧贴父元素底部，消除间隙 */
    left: 0;
    z-index: 9999; /* 提高层级，避免被其他元素覆盖 */
}

#menu .child {
    display: none;
    position: absolute;
    z-index: 9999;
}

#menu .child li {
    background-color: #E4EFF7;
    line-height: 30px;
    border-bottom: #CCC 1px solid;
    border-right: #CCC 1px solid;
    width: 100%;
    position: relative;
}

#menu .child li a {
    color: #000000;
    display: block; /* 扩大点击范围，避免无法选中 */
    padding: 0 10px;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0px;
    min-width: 10em;
}

#menu ul ul ul {
    left: 100%;
    top: 0;
    margin-left: 1px;
    z-index: 10000; /* 三级菜单层级更高 */
}

#menu li:hover {
    background-color:#04ba0d;
}

#menu .parent li:hover {
    background-color: #14871a;
}

#menu .expand {
    font-size: 12px;
    float: right;
    margin-right: 5px;
}

2. 消除hover间隙 #

给子菜单设置top: 100%，确保它和父元素li的底部完全贴合，鼠标移动时不会触发父元素的hover失效。

3. 避免Bootstrap JS干扰 #

如果你引入了Bootstrap的JS文件，它的下拉组件可能会监听点击事件干扰hover菜单。可以：

• 移除Bootstrap的JS（如果不需要其他Bootstrap交互）；
• 给菜单的父元素添加data-toggle="dropdown"（Bootstrap3）或data-bs-toggle="dropdown"（Bootstrap5），让Bootstrap识别自定义菜单；
• 或者通过JS禁用Bootstrap的下拉监听：

$(document).off('click.bs.dropdown');

三、验证修复效果 #

修改后重新测试：

• Region3应该能正常展开子菜单；
• Region2的Manage Region选项可以正常选中；
• 鼠标移到任何子菜单上时，菜单不会意外消失。

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