html - 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;。这使您的子菜单最初隐藏，并且在悬停时，它们变得可见。

以下是我更改的元素:

/* 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;
  }
}