移除顶级菜单background-color后子菜单出现间隙无法悬停如何解决

解决方案 #

核心问题根因 #

• 全局给.nav li a设置的margin:5px 0会在子菜单项之间产生外部空白，这个空白不属于li的触发区域，鼠标移到空白处就会丢失hover状态导致子菜单消失
• 没有单独区分顶级菜单项和子菜单项的样式规则，全局样式互相影响
• 缺少子菜单<ul>的基础定位、背景样式，导致间隙直接透出页面背景

具体修改步骤 #

1. 拆分顶级/子级菜单的a标签间距规则
   将原来的全局.nav li a的margin替换为padding，间距会被算入元素触发区域内，同时单独给顶级菜单项的a加上下间距，子菜单项的a取消额外间距避免产生间隙：

/* 替换原来的.nav li a 规则 */
.nav li a {
  display: inline-block;
  padding: 5px 0;
  margin: 0;
  text-decoration: none;
  width: 150px;
  line-height: 15px;
  color: #000000;
}
/* 保留顶级菜单项的原有上下间距 */
.nav > li > a {
  margin: 5px 0;
}

2. 补全子菜单ul的基础样式
   新增子菜单专属规则，避免间隙透出，同时保证hover区域连续：

/* 新增子菜单基础样式 */
.nav li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #fff;
}
/*  hover顶级li时显示子菜单 */
.nav li:hover > ul {
  display: block;
}
/* 子菜单项设置为块级，横向撑满容器 */
.nav li ul li {
  display: block;
}

3. 保留顶级菜单项无背景的配置
   原来注释掉.nav li的background-color的操作无需调整，上述规则已经单独给子菜单设置了背景，不会影响顶级菜单的透明展示效果。

效果说明 #

修改后可同时满足三个需求：

• 顶级菜单项保持无背景色的展示效果
• 子菜单项之间的间隙完全消除
• 子菜单hover区域连续，不会出现鼠标移动过程中菜单消失、无法选中的问题

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