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

您可以从中删除border属性

   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;的边界，我更接近你想要的东西。