CSS - visibility: visible; The menubar is visible before the navbar collapse - html

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">
<img width="215" height="85" src="https://www.dsgfs.com/wp-content/uploads/2015/09/Test-Logo-250x60.png" alt="">
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="label-toggle"></label>
<ul class="ulDropMenu">
<li>
Menu 1
</li>
<li>
<a href="#">Menu 2
<i class="fa fa-caret-down"></i>
</a>
<ul>
<li>
1
</li>
<li>
2
</li>
</ul>
</li>
<li>
<a href="#">Menu 3
<i class="fa fa-caret-down"></i>
</a>
<ul>
<li>
<i class="fab fa-facebook-square"></i> Facebook
<i class="fab fa-twitter-square"></i> Twitter
<i class="fab fa-instagram"></i> Instagram
</li>
</ul>
</li>
</ul>
</nav>
</nav>
The menubar is appearing outside of the navbar before the navbar collapse (see image bellow), this should not happen, this should look like this: https://codepen.io/user236945896/pen/EdaaEe
Unfortunately i can't use JavaScript on this, so i'm trying to make a collapsible menu using only CSS for some purposes.
How can i fix it?

Answer 1

You need to set overflow: hidden on your ul element. This will hide any child elements that overlap its parent's borders. Additionally this means you can remove the visibility: hidden and opacity: 0 from your ul and nav #menu-toggle:checked ~ ul element as all its contents will be hidden when the height is 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;
}
...