Chrome升级后主菜单子菜单后续列链接无法点击

嘿，我之前也碰到过Chrome特定版本里CSS多列布局导致链接失效的问题，结合你描述的情况——只有Chrome出问题、移除列布局就恢复正常——大概率是Chrome 66对column-count布局的事件处理存在bug：非第一列的内容被布局容器异常拦截了点击事件。

下面给你两种可行的解决方案：

方案1：修复多列布局的点击穿透问题 #

这个方案改动最小，不需要替换现有布局，只需要调整点击事件的穿透规则：

.nav-main .nav-level-2>ul .submenu-links {
  column-count:3;
  -moz-column-count:3;
  -webkit-column-count:3;
  pointer-events: none; /* 让列容器不拦截点击事件 */
}

.nav-main .nav-level-2>ul .submenu-links a {
  pointer-events: auto; /* 单独让链接恢复响应点击 */
}

原理是：Chrome的多列布局容器可能会在非第一列区域捕获点击事件，通过pointer-events: none让容器“透明”，让点击事件直接传递给里面的链接元素。

方案2：用Flex布局替代多列布局（更稳定） #

如果想彻底避免Chrome多列布局的潜在bug，可以用Flex实现同样的左对齐三列效果，Flex的事件处理更稳定：

.nav-main .nav-level-2>ul .submenu-links {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* 可选，设置列之间的间距 */
  max-width: 950px; /* 根据你的菜单宽度调整，确保三列排列 */
}

.nav-main .nav-level-2>ul .submenu-links li {
  flex: 0 0 calc(33.333% - 10px); /* 每列占1/3宽度，减去gap的一半 */
  box-sizing: border-box;
}

这种方式是把菜单列表拆成三个等宽的“块”，内容会自动换行到下一行，保持左对齐的整齐布局，同时所有链接的点击事件都能正常触发，不会有浏览器兼容性问题。

建议先测试方案1，因为改动小见效快；如果后续想优化布局结构，方案2是更长期的稳定选择。

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