Hoverable下拉菜单没有触发和内容之间的边界

Question

我尽量让hoverable菜单下列要求：

• 如果在列表中的项目悬停在内容部分显示在右侧。
• 如果列表中的一个项目是徘徊项目的边框颜色和内容的改变。项目和内容之间的界限将被隐藏。

例子如下：

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

问题是，有显示一些丑陋的文物，当我在浏览器中放大。也许，我的做法是错误的，有一个更好的办法如何做到这一点。下面是我的意思是人工制品：

我的代码是在这里：

HTML：

<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>Zde je nějaký obsah.</div>
                        <div>Zde taktéž</div>
                        <div>Hola hola.</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>Zde je nějaký obsah.</div>
                        <div>Zde taktéž</div>
                        <div>Hola hola.</div>
                    </div>
                </li>
            </ul>

SCSS：

.menu {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 200px;

    .menu-content {
        padding: 1rem;
    }

    .menu-item {
        &.has-dropdown {
            position: relative;

            &:hover {
                .dropdown-content {
                    transition-delay: 0.25s;
                    visibility: visible;
                    opacity: 1;
                }
                .dropdown-trigger {
                    transition-delay: 0.25s;
                    border: 1px solid green;

                    &::after {
                        transition-delay: 0.25s;
                        visibility: visible;
                        opacity: 1;
                    }
                }
            }
        }

        &:not(:last-child) > .dropdown-trigger {
            border-bottom: none;
        }

        .dropdown-trigger {
            position: relative;
            border: 1px solid red;
            &::after {
                content: '';
                transition: all 0s linear;
                visibility: hidden;
                opacity: 0;
                position: absolute;
                top: 0;
                left: 100%;
                height: 100%;
                width: 1px + 2px;
                background-color: white;
                margin-left: -1px;
                z-index: 20;
            }
        }

        .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;
        }
    }
}

你能帮助我如何实现无显示文物的结果呢？

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>