可悬停的菜单下拉菜单，触发器和内容之间没有边界

Question

我试图使一个hoverable菜单下列要求：

• 如果将列表中的项目悬停，则内容部分将显示在右侧。
• 如果悬停了列表中的某个项目，则该项目的边框颜色和内容都会更改。项目和内容之间的边界将被隐藏。

示例在这里：

我的代码在这里可用： https://codesandbox.io/s/jvk8zzqvz9

问题是，当我放大浏览器时，显示出一些丑陋的伪影。也许我的方法是错误的，并且有更好的方法来做到这一点。这是我指的人工制品：

我的代码在这里：

HTML：

then

SCSS：

Node

你能帮我如何实现结果不表明假象？

Answer 1

代替使用伪元件的劈的，我将使用的边界，使元件的正确的是白色具有较高z-index，以覆盖所述非所需的下拉中的一个。我也会躲添加另一个规则到下一个元素的上边框。

您会注意到使用渐变来模拟白色右边框。我用它来避免使用右边框在缩放时看到的不良影响。

body {
  font-family: sans-serif;
}

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 200px;
}
.menu .menu-content {
  padding: 1rem;
}
.menu .menu-item.has-dropdown {
  position: relative;
}
.menu .menu-item.has-dropdown:hover .dropdown-content {
  visibility: visible;
  opacity: 1;
  transition:0s opacity 0.8s;
}
.menu .menu-item.has-dropdown:hover .dropdown-trigger {
  border-color: green;
  /**/
  border-right-width:0;
  /* try border-right-color:#fff and you will have the same effect
     but a small glitch when zooming
  */  
  background-size:1px 100%;
  transition:0s all 0.8s;
    
  position:relative;
  z-index:20;
}
.menu .menu-item.has-dropdown:hover + * .dropdown-trigger {
  border-top-color:green;
  transition:0s border-top-color 0.8s;
}

.menu .menu-item:not(:last-child) > .dropdown-trigger {
  border-bottom: none;
}
.menu .menu-item .dropdown-trigger {
  position: relative;
  border: 1px solid red;
  background:linear-gradient(#fff,#fff) right/0px 100% no-repeat;
}

.menu .menu-item .dropdown-content {
  transition: all 0s linear;
  visibility: hidden;
  opacity: 0;
  border: 1px solid green;
  margin-left: -1px;
  position: absolute;
  top: 0;
  right: auto;
  left: 100%;
  min-width: 25rem;
  padding: 1rem;
  z-index: 19;
}

<div>
  <ul class="menu">
    <li class="menu-item has-dropdown">
      <div class="dropdown-trigger">
        <div class="menu-content"><a href="">Hover me!</a></div>
      </div>
      <div class="dropdown-content">
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
      </div>
    </li>
    <li class="menu-item has-dropdown">
      <div class="dropdown-trigger">
        <div class="menu-content"><a href="">Hover me!</a></div>
      </div>
      <div class="dropdown-content">Zde je obsah dropdownu.</div>
    </li>
    <li class="menu-item has-dropdown">
      <div class="dropdown-trigger">
        <div class="menu-content"><a href="">Hover me!</a></div>
      </div>
      <div class="dropdown-content">
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
      </div>
    </li>
  </ul>
</div>