HTML Layouts

Set width: full 320 768 1024 1920 custom
Source code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Multilevel Pop-down Menu</title>
    <meta name="description" content="Responsive multilevel pop-down menu with submenus">
    <style>
        body {
            margin: 0;
            font-family: sans-serif;
        }

        .menu {
            display: flex;
            background-color: #333;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        input[type=checkbox] {
            display: none;
        }

        .menu li {
            position: relative;
        }

        .menu>li>a,
        .menu>li>label {
            display: block;
            padding: 1rem 2rem 1rem 1rem;
            color: white;
            white-space: nowrap;
            text-decoration: none;
            cursor: pointer;
        }

        .menu>li:hover>a,
        .menu>li:hover>label {
            background-color: #444;
        }

        .submenu {
            display: none;
            position: absolute;
            background-color: #444;
            list-style: none;
            padding: 0;
            margin: 0;
            white-space: nowrap;
        }

        .submenu li {
            position: relative;
        }

        .submenu li a,
        .submenu li label {
            display: block;
            padding: 1rem 2rem 1rem 1rem;
            color: white;
            text-decoration: none;
            cursor: pointer;
        }

        .menu>li:has(.submenu) label::after, .submenu li:has(.submenu) label::after {
            content: "▶";
            position: absolute;
            right: 1rem;
            font-size: .75em;
            color: #ccc;
        }

        .menu>li:has(.submenu)>label::after {
            content: "▼";
        }

        .submenu li a:hover,
        .submenu li label:hover {
            background-color: #555;
        }

        .submenu .submenu {
            left: 100%;
            top: 0;
        }

        .hamburger {
            display: none;
            font-size: 30px;
            cursor: pointer;
            padding: 1rem;
            color: white;
            background-color: #333;
        }

        #menu-toggle {
            display: none;
        }

        @media (min-width: 1024px) {

            .menu>li:hover>.submenu,
            .submenu li:hover>.submenu {
                display: block;
            }
        }

        @media (max-width: 1023px) {

            .menu>li:has(.submenu) label::after, .submenu li:has(.submenu) label::after {
                content: "▼";
            }

            .menu {
                flex-direction: column;
                display: none;
            }

            .menu>li {
                width: 100%;
            }

            .submenu {
                position: relative;
            }

            .submenu .submenu {
                left: 0;
                margin-left: 1rem;
            }

            .hamburger {
                display: block;
            }

            #menu-toggle:checked+.menu {
                display: flex;
            }

            .menu>li>input[type="checkbox"] {
                display: none;
            }

            .menu>li>input[type="checkbox"]:checked+.submenu,
            .submenu li>input[type="checkbox"]:checked+.submenu {
                display: block;
            }
        }
    </style>
</head>

<body>
    <label for="menu-toggle" class="hamburger">&#9776;</label>
    <input type="checkbox" id="menu-toggle">
    <ul class="menu">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <label for="submenu-1">About</label>
            <input type="checkbox" class="submenu-checkbox" id="submenu-1">
            <ul class="submenu">
                <li>
                    <a href="#">Our Team</a>
                </li>
                <li>
                    <a href="#">Our Story</a>
                </li>
                <li>
                    <label for="submenu-2">Careers</label>
                    <input type="checkbox" class="submenu-checkbox" id="submenu-2">
                    <ul class="submenu">
                        <li><a href="#">Job Openings</a></li>
                        <li>
                            <label for="submenu-3">Internships</label>
                            <input type="checkbox" class="submenu-checkbox" id="submenu-3">
                            <ul class="submenu">
                                <li><a href="#">Subitem 1</a></li>
                                <li><a href="#">Subitem 2</a></li>
                                <li><a href="#">Subitem 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Services</a>
            <input type="checkbox" id="submenu-toggle-2">
            <ul class="submenu">
                <li><a href="#">Consulting</a></li>
                <li><a href="#">Development</a></li>
                <li><a href="#">Design</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</body>
</html>