css - Help with creating a menu with multiple columns

I'm creating a custom menu in WordPress that will have multiple columns. I have it working for the most part. There are 2 issues I am having. First, when I hover over the menu item to display the drop down, I want all dropdown menus to be lined up at the start of the primary menu. Second, sometimes a link in the dropdown menu will also have a dropdown associated with that. I would like that to be in just a single column. The css to display the dropdowns is below. Let me know if you need anything else.

.site-nav ul ul {
    z-index: 1000000;
    columns: 2;
    position: absolute;
    top: -9999999px;
    left: 0;
    opacity: 0;
    background: #3498db;
    text-align: left;
}

.site-nav ul ul ul {
    z-index: 1000000;
    columns: 1;
    position: absolute;
    top: -9999999px;
    left: 0;
    opacity: 0;
    background: #3498db;
    text-align: left;
}

.site-nav ul li:hover > ul {
    position: absolute;
    top: 95%;
    opacity: 1;
    left: 0;
}

EDIT

Screenshots of what is happening:

I'm creating a custom menu in WordPress that will have multiple columns. I have it working for the most part. There are 2 issues I am having. First, when I hover over the menu item to display the drop down, I want all dropdown menus to be lined up at the start of the primary menu. Second, sometimes a link in the dropdown menu will also have a dropdown associated with that. I would like that to be in just a single column. The css to display the dropdowns is below. Let me know if you need anything else.

.site-nav ul ul {
    z-index: 1000000;
    columns: 2;
    position: absolute;
    top: -9999999px;
    left: 0;
    opacity: 0;
    background: #3498db;
    text-align: left;
}

.site-nav ul ul ul {
    z-index: 1000000;
    columns: 1;
    position: absolute;
    top: -9999999px;
    left: 0;
    opacity: 0;
    background: #3498db;
    text-align: left;
}

.site-nav ul li:hover > ul {
    position: absolute;
    top: 95%;
    opacity: 1;
    left: 0;
}

EDIT

Screenshots of what is happening:

• css

Share Improve this question edited Apr 30 at 20:24 Darth Mikey D asked Apr 30 at 19:38 Darth Mikey DDarth Mikey D 10511 silver badge99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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;
}