鼠标悬停Products标签时Services菜单项右移的CSS设置问题求助

问题根因 #

三处配置错误共同导致了布局偏移问题：

1. .dropdown-content规则中重复声明position属性，后面的position: relative覆盖了前面的position: absolute，相对定位元素属于常规文档流，展开时会占据高度空间，把同层级浮动排列的Services菜单项挤到右侧
2. .navbar设置了overflow: hidden，会裁切掉超出导航栏高度的下拉内容
3. .dropdown规则也设置了overflow: hidden，会裁剪子级的绝对定位下拉菜单

修复方案 #

修改对应CSS配置即可解决：

• 给.navbar添加position: relative作为下拉菜单的定位参照物，同时删除原有的overflow: hidden属性
• 删除.dropdown规则中的overflow: hidden属性
• 删除.dropdown-content中的position: relative声明，保留position: absolute让下拉菜单脱离文档流，不会挤占导航栏原有布局空间

修改后的对应CSS代码如下：

.navbar {
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
  position: relative; /* 新增定位上下文 */
  /* 删除原有overflow: hidden属性 */
}

.dropdown {
  float: left;
  /* 删除原有overflow: hidden属性 */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  /* 删除原有position: relative属性 */
}

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