绝对定位子元素能否置于行内父元素下方？如何消除Tab下拉菜单白线？

我想制作Tab样式，让Tab底部没有下划线。原本打算设置Tab的底部边框颜色，再将子菜单置于其下方，但不确定是否可行。

以下是网站中的代码片段，实现了hover时显示子菜单的效果：

CSS 代码 #

body {
  background-color: #000;
}

.desktop-menu {
  color: #fff;
  list-style: none;
}
.desktop-menu a {
  color: #fff;
  text-decoration: none;
}
.desktop-menu > li {
  background-color: blue;
  width: 60px;
  margin-left: 25px;
  border: 1px solid #fff;
  border-bottom-color: blue;
  padding: 10px;
  position: relative;
  z-index: 20;
}
.desktop-menu ul {
  background-color: blue;
  z-index: 10;
  width: 200px;
  display: flex;
  position: absolute;
  top: 100%;
  left: -1px;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 10px 20px;
  padding-top: 15px;
  border: 1px solid #fff;
  background-color: darkblue li;
  padding-bottom: 15px;
}
.desktop-menu .has-sub:hover {
  border: 1px solid #fff;
}
.desktop-menu .has-sub:hover ul {
  display: flex;
}

HTML 代码 #

<ul class="desktop-menu">
  <li class="has-sub"><a href="#">Products</a>
    <ul>
      <li><a href="#">Product name 1</a></li>
      <li><a href="#">Prod name 2</a></li>
    </ul>
  </li>
</ul>

我现在需要移除下图中的这条白色线条：

请问实现该效果的最优方法是什么？

最优方法是通过调整父元素hover时的边框样式、子菜单的定位，同时修正代码中的无效内容来解决：

1. 修正父元素hover时的边框设置 #

原来的.desktop-menu .has-sub:hover会把所有边框改成白色，导致底部出现白线。我们只修改上、左、右三边的边框颜色，底部保持和Tab背景一致的蓝色：

.desktop-menu .has-sub:hover {
  border-color: #fff;
  border-bottom-color: blue;
}

2. 调整子菜单的top值，贴合父元素底部 #

将子菜单的top: 100%改成top: calc(100% - 1px)，让子菜单向上偏移1px，刚好盖住父元素底部可能露出的缝隙：

.desktop-menu ul {
  top: calc(100% - 1px);
}

3. 修复CSS中的无效代码 #

原代码中.desktop-menu ul里的background-color: darkblue li;是错误写法，改成background-color: darkblue;，保证子菜单背景正常显示。

完整修正后代码 #

CSS

body {
  background-color: #000;
}

.desktop-menu {
  color: #fff;
  list-style: none;
}
.desktop-menu a {
  color: #fff;
  text-decoration: none;
}
.desktop-menu > li {
  background-color: blue;
  width: 60px;
  margin-left: 25px;
  border: 1px solid #fff;
  border-bottom-color: blue;
  padding: 10px;
  position: relative;
  z-index: 20;
}
.desktop-menu ul {
  background-color: darkblue;
  z-index: 10;
  width: 200px;
  display: none; /* 默认隐藏，hover时显示更合理 */
  position: absolute;
  top: calc(100% - 1px);
  left: -1px;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 10px 20px;
  padding-top: 15px;
  border: 1px solid #fff;
  padding-bottom: 15px;
}
.desktop-menu .has-sub:hover {
  border-color: #fff;
  border-bottom-color: blue;
}
.desktop-menu .has-sub:hover ul {
  display: flex;
}

HTML

<ul class="desktop-menu">
  <li class="has-sub"><a href="#">Products</a>
    <ul>
      <li><a href="#">Product name 1</a></li>
      <li><a href="#">Prod name 2</a></li>
    </ul>
  </li>
</ul>

这样修改后，hover时Tab底部不会出现白色边框，子菜单也能完美贴合Tab底部，彻底消除白线问题。

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