我如何让菜单有一个滚动

Question

我的菜单框有更多的内容要显示，但我不能向下滚动看到的内容，它只是消失了。我试过做overflow-y: auto;但是不工作

我的代码

<div class="nav-cont d-flex align-items-center justify-content-end">
<div class="col-md-3">
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box d-flex flex-column ">
<div class="menu-title-container d-flex align-items-center justify-content-center">
<p class="menu-title">Most Popular</p>
</div>
<div class="menu-line-break"></div>
<li><a class="menu__item" href="#">Batteries</a></li>
<li><a class="menu__item" href="#">Engine Oil</a></li>
<li><a class="menu__item" href="#">Spark Plugs</a></li>
<li><a class="menu__item" href="#">Tyres</a></li>
<li class="menu-btn-expand"><a class="menu__item" href="#">Show More</a></li>
<div class="menu-line-break"></div>
<div class="menu-title-container d-flex align-items-center justify-content-center">
<p class="menu-title">Shop Deals</p>
</div>
<div class="menu-line-break"></div>
<li><a class="menu__item" href="#">Top Deals</a></li>
<div class="menu-line-break"></div>
<div class="menu-title-container d-flex align-items-center justify-content-center">
<p class="menu-title">Shop By</p>
</div>
<div class="menu-line-break"></div>
<li><a class="menu__item" href="#">By Make</a></li>
<li><a class="menu__item" href="#">By Model</a></li>
<div class="menu-line-break"></div>
<div class="menu-title-container d-flex align-items-center justify-content-center">
<p class="menu-title">Trustworthy Advice</p>
</div>
</ul>

</div>

</div>

CSS

/*Hamburger Menu*/
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked ~ .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
top: 0;
transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
visibility: visible;
left: 0;
}
.menu__btn {
display: flex;
align-items: center;
position: relative;
top: -1rem;
left: 3rem;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 5px;
background-color: #616161;
transition-duration: 0.25s;
}
.menu__btn > span::before {
content: "";
top: -8px;
}
.menu__btn > span::after {
content: "";
top: 8px;
}
.menu__box {
display: block;
position: fixed;
visibility: hidden;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 1rem 0;
list-style: none;
background-color: #fff;
box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
border-right: 1px solid black;
border-top: 1px solid black;
overflow-y: auto;
transition-duration: 0.25s;
}
.menu__box li a {
font-size: 0.8rem;
font-family: "Poppins";
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
border-top: none;
transition-duration: 0.25s;
}
.menu__item:hover {
background-color: #f5f5f5;
}
.menu-line-break {
background-color: #f5f5f5;
width: 80%;
height: 0.2rem;
margin: 0.5rem auto;
}
.menu-btn-expand {
text-decoration: underline;
}
.menu-title-container {
width: 100%;
}

我提前感谢你的帮助。谢谢你！我不知道问题从哪里来，我对这个有点陌生。

Answer 1

我删除了溢出-y: auto;并增加了溢出:auto;从两侧移除隐藏部分

.menu__box {
display: block;
position: fixed;
visibility: hidden;
left: -100%;
width: 300px;
height: calc(100% - 100px);
margin: 0;
padding: 1rem 0;
list-style: none;
background-color: #fff;
box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
border-right: 1px solid black;
border-top: 1px solid black;
overflow: auto;
transition-duration: 0.25s;
}