Help with creating a menu with multiple columns

the following code should help and I have added comments for explanation:

.site-nav ul ul {
    z-index: 1000000;
    position: absolute;
    top: -9999999px;
    left: 0; /* Align with the left edge of the parent */
    transform: none; /* Cancel the centering transform */
    opacity: 0;
    background: #3498db;
    text-align: left;
    columns: auto; /* Remove multi-column layout */
}

.site-nav ul ul ul {
    z-index: 1000000;
    position: absolute;
    top: 0;
    left: 100%;
    opacity: 0;
    background: #3498db;
    text-align: left;
    columns: auto; /* Ensure only one column for deeper menus */
}

.site-nav ul li:hover > ul {
    position: absolute;
    top: 100%;
    left: 0; /* Align with left edge of parent */
    transform: none; /* Cancel centering */
    opacity: 1;
}