Как исправить выпадающее меню навигации в мобильном браузере?

я смотрю учебник о том, как сделать панель навигации отзывчивой, dropdown в браузере компьютера все в порядке, но раскрывающийся список в мобильной версии не работает.

HTML и CSS-код навигационной панели выглядит следующим образом;

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;

}

header {
    position: relative;
    max-width: 1200px;
    margin: 20px auto;
    padding: 10px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgb(0, 0, 0, .2);
}

.container {
    max-width: 1200px;
    margin: 20px auto;
}

.logo {
    color: #069370;
    height: 50px;
    font-size: 36px;
    line-height: 60px;
    padding: 0 20px;
    text-align: center;
    box-sizing: border-box;
    float: left;
    font-weight: 700;
    text-decoration: none;
}

nav {
    float: right;
}

.clearfix {
    clear: both;
}

nav ul {
    margin: 0;
    margin padding: 0;
    display: flex;
}

nav ul li {
    list-style: none;
    position: relative;
}

nav ul li.sub-menu:before {
    content: '\f0d7';
    font-family: fontAwesome;
    position: absolute;
    line-height: 50px;
    color: #262626;
    right: 5px;
    top: 6px;
}


nav ul li.active.sub-menu:before {
    content: '\f0d8';
}

nav ul li ul {
    position: absolute;
    left: 0;
    background: #fff;
    display: none;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

nav ul li.active ul {
    display: block;
}

nav ul li ul li {
    display: block;
    width: 210px;
}

nav ul li a {
    display: block;
    margin: 10px 0;
    padding: 10px 20px;
    text-decoration: none;
    color: #262626;
}

nav ul li a.active,
nav ul li a:hover {
    background: #069370;
    color: #fff;
    transition: 0.5s;
}


@media screen and (max-width: 1200px) {
    header {
        margin: 20px;
    }

}

@media screen and (max-width: 778px) {
    .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;
    }

    nav {
        display: none;
    }

    .menu-toggle.active:before {
        content: '\f00d';
    }

    nav.active {
        display: block;
        width: 100%;
    }

    nav.active ul {
        display: block;
    }

    nav.active ul li a {
        margin: 0;
    }

    nav ul li.active ul {
        position: relative;
        background: #069370;

    }

    nav ul li ul li {

        width: 100%;
    }

}

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <title>Document</title>
    <link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.2.0/css/all.css"
        integrity = "sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin = "anonymous">
    <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <link rel = "stylesheet" href = "navbar.css">
</head>

<body>
    <header>
        <a href = "#" class = "logo">CMS</a>
        <div class = "menu-toggle"></div>
        <nav>
            <ul>
                <li class = "sub-menu"><a href = "#" class = "active">Dashboard</a>
                    <ul>
                        <li><a href = "dashboard.php"><i class = "fa fa-users"></i>
                                <span>Analytics</span></a></li>
                        <li><a href = "appointment_request.php"><i class = "fa fa-list-alt"></i>
                                <span>Appointment Request</span></a></li>
                    </ul>
                </li>
                <li class = "sub-menu"><a href = "#">Admin</a>
                    <ul>
                        <li><a href = "users_management.php"><i class = "fa fa-user"></i>
                                <span>Users Management</span></a></li>
                        <li>
                            <a href = "PHP/action_logout.php">
                                <i class = "fa fa-arrow-left"></i>
                                <span class = "title">Logout</span>
                            </a></li>
                    </ul>
                </li>
                <li class = "sub-menu"><a href = "#">Patients</a>
                    <ul>
                        <li><a href = "patient_information.php"><i class = "fa fa-users"></i>
                                <span>Patient Information</span></a></li>
                        <li><a href = "patient_record.php"><i class = "fa fa-list-alt"></i>
                                <span>Patient Records</span></a></li>
                    </ul>
                </li>
                <li class = "sub-menu"><a href = "#">Medicines</a>
                    <ul>
                        <li><a href = "medicine_information.php"><i class = "fa fa-medkit"></i>
                                <span>Medicine Information</span></a></li>
                        <li><a href = "added_stock.php"><i class = "fa fa-plus"></i>
                                <span>Added Stocks</span></a></li>
                        <li><a href = "deducted_stock.php"><i class = "fa fa-minus"></i>
                                <span>Deducted Stocks</span></a></li>
                    </ul>
                </li>
                <li class = "sub-menu"><a href = "#">Appointments</a>
                    <ul>
                        <li><a href = "appointment_info.php"><i class = "fa fa-calendar"></i>
                                <span>Appointment Information</span></a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <div class = "clearfix"></div>
    </header>
</body>

</html>

jquery

<script type = "text/javascript">
$(document).ready(function(){
    $('.menu-toggle').click(function(){
        $('.menu-toggle').toggleClass('active')
        $('nav').toggleClass('active')
    })
        $('ul li').click(function(){
            $(this).siblings().removeClass('active');
            $(this).toggleClass('active');
        })
    })

когда я запускаю код в мобильной версии, раскрывающийся список не выравнивается в соответствии с его положением перспективы, я не знаю, что не так, или я что-то упускаю

1. Замените тег PHP на CSS. 2. Возьмите тур и прочитайте руководство Как спросить.

— 25.03.2019 16:57

Выпадающий список даже не работает в браузере для меня

— 25.03.2019 17:07

извините, я не знаю, как, но, пожалуйста, помогите мне, ребята

— 25.03.2019 17:17

php html

25.03.2019 16:56

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...