Границы в раскрывающемся меню 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

Я немного приблизился к тому, что вы ищете, заменив границы на <li> на box-shadow: inset 0 0 1px #000;.

Answer 3

Вы можете удалить атрибут границы из вашего

   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.