CSS下拉菜单中的边框未隐藏且边框重叠

Question

以下是您可以在实践中看到的演示：JSFiddle

---

我尝试过的

/* Child menu */
nav ul ul {
  border: 0;   /* Add */

/* Child menu display with hover */
nav ul li:hover > ul > li {
  border: solid 1px #000;   /* Add */
}

/* ▼ Add */
nav ul li:hover > ul > li:last-child {
  border-top: 0;
}

JSFiddle

但是，像这样，边框已插入到每个子菜单/孙子菜单中，并且孙子菜单的border-top也最终消失了。

我只想将轮廓边框作为子菜单/孙子菜单，例如nav。那可能吗？

我尝试了border: initial;或border-top: initial;等，但由于边框消失了而无法正常工作。

Answer 1

这里的问题是您实际上并没有隐藏子菜单（并悬停显示它们），因此显示了它们的边框。

我玩弄了您的jsfiddle-我只是调整了nav ul ul以包含visibility: hidden;，并调整了nav ul li:hover > ul以包含visibility: visible;。这样一来，您的子菜单最初为hidden，并在悬停时变为visible。

以下是我更改的元素：

/* Child menu */
nav ul ul {
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 0;
  visibility: hidden;
  li {
    overflow: hidden;
    width: 100%;
    height: 0;
    background: white;
    > a {
      display: block;
      color: black;
      padding: 1rem 3rem 1rem 2rem;
    }
  }
}

/* Child menu display with hover */
nav ul li:hover > ul {
  visibility: visible;
  > li{
    overflow: visible;
    height: auto;
  }
}

Answer 2

您可以从自己的边框中删除边框属性

   nav{
   [...]
       ul{
       [...]
            border: 1px solid black;
       }
   }

并添加

    nav >ul > li,
    ul > li:hover > ul > li,
    ul > li:hover > ul > li:hover ul > li{
        border: 1px solid black;
    }

CSS末尾的

。

Answer 3

通过用<li>替换box-shadow: inset 0 0 1px #000;上的边框，我离您要寻找的东西更近了。