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

Question

我尝试制作具有以下要求的可悬停菜单：

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

示例在这里：

我的代码在这里可用： 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;
        }
    }
}

你能帮我如何在没有显示人工制品的情况下达到结果吗？

标签： htmlcsssass

Answer 1

而不是使用伪元素的hack，我将使用边框并将右侧的元素设置为白色，并使用更高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>