我是網絡新手，所以我需要你的幫助。 問題:我需要創建一個負責任的導航條，但是一些代碼根本不能工作

這是:

@media screen and (max-width: 850px) {
    .menu {
        width: 100%;
        max-height: 0;
        overflow: hidden;
    }
    
    #toggler:checked ~ .menu {
        max-height: 100%;
    }

我的html:

<section class="menu">
                <ul class="list_navbar">
                    <li><a id="account" href="#">личный кабинет</a></li>
                    <li><a href="#">о нас</a></li>
                    <li><a href="#">программы</a></li>
                    <li><a href="#">контакты</a></li>
                </ul>
            </section>
            <a href="#" class="logo"><img src="images/icon.svg" alt="icon_logo"></a>
            <input type="checkbox" id="toggler">
            <label for="toggler"><svg></svg></label>

一個devtools并沒有幫助我，因為它甚至沒有向我顯示@media對#toggler的影響。 我做錯了什么？

我試過overflow:visible for # tog gler:checked ~。菜單，但什么也沒發生。