如何移除导航栏nav-bar与下拉菜单drop down menu之间的空隙

• 绝对定位偏移缺失：.sub_menu1设置了position: absolute但未指定top属性，默认位置跟随父元素内容流排布，无法紧贴导航栏底部。
• 元素属性冲突：.navigation li同时设置了float: left和display: table-cell，两个属性逻辑冲突，导致父元素高度计算异常，间接造成下拉菜单位置偏移。
• 行内块默认间距：.sub_menu1下的ul使用了display: inline-block，该属性默认存在基线对齐带来的额外空隙，放大了间隙问题。

修改对应CSS规则即可，核心修改点如下：

1. 删除.navigation li的display: table-cell属性，消除属性冲突
2. 给下拉菜单新增top: 100%、left: 0定位规则，强制紧贴父元素底部
3. 将下拉菜单内ul的display: inline-block改为display: block，消除默认间距

修改后的关键CSS代码：

/* 导航栏li */
.navigation li {
  float: left;
  height: 100%;
  padding: 0px 20px;
  position: relative;
}

/*  hover触发的下拉菜单 */
.navigation li:hover .sub_menu1 {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #d4a18d;
}

/* 下拉菜单内列表 */
.navigation li:hover .sub_menu1 ul {
  display: block;
  margin: 0;
  padding: 0;
  text-align: center;
}

修改完成后即可实现粉色下拉框紧贴黑色导航栏的预期效果。

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