鼠标移入或移出带hover父元素时下拉菜单消失无法停留问题

你的下拉菜单异常消失的核心原因是父级导航li元素和绝对定位的子菜单之间存在15px的无响应空白间隙，当鼠标移动经过这段间隙时，会脱离父li的hover触发范围，导致子菜单的显示规则失效。

修复方案 #

• 给父级li元素添加相对定位，作为子菜单绝对定位的参照物，避免子菜单位置偏移
• 把子菜单的margin-top替换为padding-top，让间隙区域属于子菜单的可触发hover范围
• 移除无效的冗余样式和不必要的!important规则，避免样式优先级冲突

修正后的完整CSS代码 #

/* 新增：父级li设为相对定位，作为子菜单定位参照 */
.navbar-header ul li {
  position: relative;
}

.sub-menu{
  display: none;
}

.sub-menu ul li{
  margin: 15px;
  width: 120px;
  padding: 15px;
}

.navbar-header ul li:hover .sub-menu{
  display: block;
  position:absolute;
  background: white;
  /* 原margin-top改为padding-top，消除空白间隙 */
  padding-top: 15px;
  margin-left: -15px;
  /* 子菜单顶部对齐父li底部 */
  top: 100%;
  left: 0;
}

.navbar-header ul li:hover .sub-menu ul{
  display: block;
  margin: 10px; 
  -o-transition:.3s ease;
  -ms-transition:.3s ease;
  -moz-transition:.3s ease;
  -webkit-transition:.3s ease;
  transition:.3s ease;
  outline: none;
}

.sub-menu ul li:hover {
  display: block;
  background: #f69220;
}

.sub-menu ul li a{
  color: black;
}
.navbar-header ul li:hover .sub-menu ul li{
  display: block !important;
  color: black ;
  width: 150px;
  padding: 5px;
  border-radius: 0;
  text-align: center;
}

修复逻辑说明 #

原代码中margin-top:15px是子菜单的外边距，不属于任何可触发hover的元素区域，鼠标移过这段空白时既不处于父li范围内，也不处于子菜单范围内，就会触发hover离开事件导致子菜单隐藏。替换为padding-top后，这段间距属于子菜单的内部区域，只要鼠标在子菜单（含padding区域）范围内，父li始终处于hover状态，子菜单就会持续保持显示。

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