javascript - 导航栏，响应式导航有问题

Question

当我的导航栏在小屏幕上显示时(移动示例)，它没有按预期显示，我无法解决问题

我多次尝试更改我的 css 但情况变得更糟

你能帮帮我吗:)

navbar responsive test

@media( max-width: 1200px){
    header{
        /*margin: 20px;*/
        
    }
}
@media( max-width: 768px){
    .menu-toggle{
        display: block;
        width: 40px;
        height: 40px;
        margin: 10px;      
        float: right;
        cursor: pointer;
        text-align: center;
        font-size: 30px;
        color: #069370;
    }
    .menu-toggle:before{
        content: '\f0c9';
        font-family:  FontAwesome;
        line-height: 40px;
    }
    .menu-toggle.active:before{
        content: '\f00d';
        font-family:  FontAwesome;
        line-height: 40px;
    }
    nav {
        display: none;
    }
    nav.active {
        display: block;
        width: 100%;
    }
    nav.active ul {
        display: block;
        
    }
    nav.active ul li a {
        margin: 0;
        
    }
}

Answer 1

<header> 中的元素元素 a float ，因此菜单不知道元素在哪里停止，这导致 CSS不知道如何计算该元素的高度

一个快速解决方法是将 overflow: hidden :

<header style="overflow: auto"> ... </header>

您可以从这个详尽的 StackOverflow 答案中了解很多相关信息 link to answer