Chrome打开网页时下拉菜单hover效果消失，在线代码片段运行正常

问题根因 #

在线代码片段平台默认会自动清除浏览器默认样式，你的代码在该环境下运行正常，但本地打开时Chrome浏览器自带的默认样式给<ul>标签添加了默认内外边距，导致二级下拉菜单和父级菜单项之间出现细小空隙，鼠标从父菜单移到下拉列表的过程中会脱离父<li>的hover触发区域，导致hover效果消失、下拉菜单关闭。

修复步骤 #

• 第一步：添加基础样式重置，清除浏览器默认边距
  在CSS代码最顶部添加以下规则：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• 第二步：明确二级下拉菜单的定位位置，确保完全贴合父菜单项底部
  修改nav ul li ul的CSS规则，补充top和left定位属性：

nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #190061;
  border-radius: 0px 0px 4px 4px;
}

修复后完整CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
nav {
  width: 100%;
  height: 60px;
  background-color: #190061;
}

nav h4 {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  font-size: 24px;
  line-height: 55px;
  float: left;
  padding: 0px 20px;
}

nav ul {
  float: left;
}

nav ul li {
  float: left;
  list-style: none;
  position: relative;
}

nav ul li a {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  font-size: 18px;
  padding: 24px 14px;
  text-decoration: none;
}

nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #190061;
  border-radius: 0px 0px 4px 4px;
}

nav ul li:hover ul {
  display: block;
}

nav ul li ul li a {
  padding: 8px 14px;
}

nav ul li ul li a:hover {
  background-color: red;
}

nav ul li ul li {
  width: 180px;
  border-radius: 4px;
}

修改后保存刷新本地页面即可正常触发hover效果。

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