html - CSS - 可见性 : visible; The menubar is visible before the navbar collapse

Question

* {
  margin: 0;
  padding: 0;
  border: 0;
}
.navBar {
  background-color: #2A2A2A;
  min-width: 100%;
}
.wrapper {
  max-width: 100%;
  padding: 0 10px;
}
nav ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  padding-top: 15px;
}
nav ul a {
  color: #7f7f7f;
  text-decoration: none;
  transition: color .4s ease;
  font-size: 18px;
}
nav ul li ul li a{
    font-size: 15px;
}
nav ul a:hover {
  color: #afafaf;
}
nav li {
  display: inline-block;
}
nav #menu-toggle {
  display: none;
}
nav .label-toggle {
  display: none;
}
nav .wrapper {
  align-items: center;
  display: flex;
}

@media screen and (max-width: 1366px) {
  nav nav ul li ul li {
    color: #7f7f7f;
    padding-right: 20px;
  }
  nav ul {
    display: block;
    height: 0;
    list-style-type: none;
    opacity: 0;
    text-align: left;
    padding-left: 0;
    transition: height 1s ease;
    width: 50%;
    visibility: hidden;
  }
  nav li {
    color: #53354A;
    display: block;
    font-size: 19px;
  }
  nav #menu-toggle:checked ~ ul {
    opacity: 1;
    height: 150px;
    visibility: visible;
  }
  nav .label-toggle {
    background: linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%);
    cursor: pointer;
    display: block;
    float: right;
    height: 35px;
    margin-top: 35px;
    width: 35px;
  }
  nav .wrapper {
    display: block;
  }
}

<nav class="navBar">
  <nav class="wrapper">
    <a href=""><img width="215" height="85" src="https://www.dsgfs.com/wp-content/uploads/2015/09/Test-Logo-250x60.png" alt=""></a>
    <input type="checkbox" id="menu-toggle" />
      <label for="menu-toggle" class="label-toggle"></label>
    <ul class="ulDropMenu">
      <li>
        <a href="">Menu 1</a>
      </li>     
        <li>
          <a href="#">Menu 2
          <i class="fa fa-caret-down"></i>         
          </a>
            <ul> 
              <li>
                <a href="">1</a>
              </li>
              <li>
                <a href="">2</a>
              </li>
            </ul>
        </li>
      <li>
        <a href="#">Menu 3
        <i class="fa fa-caret-down"></i>                 
        </a>
        <ul>                     
          <li>
            <a href="" target="_blank"><i class="fab fa-facebook-square"></i> Facebook</a>
            <a href="" target="_blank"><i class="fab fa-twitter-square"></i> Twitter</a>
            <a href="" target="_blank"><i class="fab fa-instagram"></i> Instagram</a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</nav>

在导航栏折叠之前，菜单栏出现在 navbar 之外(见下图)，这不应该发生，应该如下所示:https://codepen.io/user236945896/pen/EdaaEe

不幸的是我不能在这上面使用 JavaScript，所以出于某些目的，我试图仅使用 CSS 制作一个可折叠菜单。

我该如何解决？

Answer 1

您需要在 ul 元素上设置 overflow: hidden。这将隐藏与其父元素边界重叠的任何子元素。此外，这意味着您可以从 ul 和 nav #menu-toggle:checked 中删除 visibility: hidden 和 opacity: 0 ~ ul 元素，因为当高度为 0 时，其所有内容将被隐藏。

@media screen and (max-width: 1366px) {
    ...
    nav ul {
        display: block;
        height: 0;
        list-style-type: none;
        text-align: left;
        padding-left: 0;
        transition: height 1s ease;
        width: 50%;
        overflow: hidden;
    }
    ...
    nav #menu-toggle:checked ~ ul {
        height: 150px;
    }
    ...