Wordpress - Multiple Drop Downs as a Header Menu (Desktop) [Archived]

gistfile1.txt

/*Main Menu - Desktop -----------> */
            .main-nav {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0;
                padding: 0;
                margin: 0;
                z-index: 99999;
                background-color: var(--color_base)
            }
            .menu-container {
                display: flex;
                position: relative;
            }
            .dropdown-menu {
                list-style: none;
                display: flex;
                margin: 0;
                padding: 0;
                gap: 10px;
                z-index: 999999;
            }
            .dropdown-menu > li {
                position: relative;
            }
            .dropdown-menu > li > a {
                display: block;
                padding: 10px 15px;
                text-decoration: none;
                color: var(--color_fnt_wht);
            }
            /* Submenu styling */
            .dropdown-menu ul {
                list-style: none;
                position: absolute;
                top: 100%;
                left: 0;
                background: white;
                min-width: 200px;
                padding: 10px 0;
                margin: 0;
                display: none;
                flex-direction: column;
                border: 1px solid #ddd;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            }
            .dropdown-menu li:hover > ul {
                display: flex;
            }

            .dropdown-menu ul li a {
                display: block;
                padding: 10px 15px;
                text-decoration: none;
                color: #333;
            }

            .dropdown-menu ul li a:hover {
                background-color: #f0f0f0;
            }


            /*END - Main Menu - Desktop */