CSS如何实现hover a标签时移除其与下拉菜单交界处的底部边框

解决方法 #

只需调整以下CSS规则即可实现悬浮时a标签与下拉菜单交界处边框消失的效果，核心逻辑是隐藏一级a标签的下边框，同时让下拉菜单上移1px与a标签无缝衔接：

.main-navigation {
  margin-top: -20px;
  margin-right: 15px;
  width: 2em;
  height: 2em;
  color: #D9D9D9;
  align-content: center;
}

.firstLevelul{
  padding-left: 0;
  list-style: none;
  justify-content:flex-end;
}

/* 新增：给一级li设置相对定位作为下拉的定位上下文 */
.firstLevelli {
  position: relative;
}

.firstLevela{
  display: block;
  text-align: center;
  font: normal small-caps 100 20px/1.8em 'Helvetica Neue';
  text-decoration: none;
  height: 1.5em;
  border: 1px solid #D9D9D9;
  /* 新增：设置白色背景遮挡下拉菜单的上边框 */
  background-color: #fff;
}

.firstLevela:hover{
  color: #D9D9D9;
  width: 1.5em;
  height: 1.5em;
}

/* 新增：悬浮时隐藏a标签下边框、提升层级 */
.firstLevelli:hover > .firstLevela {
  border-bottom-color: transparent;
  position: relative;
  z-index: 10;
}

.secondLevelul{
  display: none;
  list-style-type: none;
  padding-left: 0;
}

.secondLevela{
  text-decoration: none;
  display: block;
}

.secondLevelli:hover{
  background-color: violet;
}

.firstLevelli:hover > .secondLevelul{
  display: block;
  width: 200px;
  height: 200px;
  background-color: white;
  border: 1px solid #D9D9D9;
  /* 新增：上移1px与a标签底部对齐 */
  position: relative;
  top: -1px;
}

HTML代码无需修改。修改后一级a标签悬浮时的下边框会被隐藏，同时自身白色背景会挡住下拉菜单上移后的上边框，交界处不会出现多余边框。

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