style.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.menu-toggle {
    display: none;
}

.menu-btn {
    display: none;
    cursor: pointer;
    padding: 10px;
}

.menu-btn span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
}

.nav-menu {
    list-style-type: none;
    padding: 0;
}

.nav-menu li {
    display: inline-block;
    margin-right: 20px;
}

@media screen and (max-width: 768px) {
    .menu-btn {
        display: block;
    }

    .nav-menu {
        display: none;
        background-color: #f1f1f1;
        position: absolute;
        width: 100%;
    }

    .nav-menu li {
        display: block;
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

    .menu-toggle:checked~.nav-menu {
        display: block;
    }
}