Two Columns in submenü instead of one – CSS Implementation

Dear supporter and experts,

i Need the submenü in two colums.

for that i have to add a Definition for that in a Code for one column.

i am unable to find the solution and in the hope to find here Knowledge for that.

the Definition Code is the following, in wich the unterlined part is the css for the submenu.

i want to add specific css in the wordpressmenucreator. there are two ways that i know. one to sort the Points even and odd each in one column and both with the same css short Code for menubuilder. the other solution is, to create two colums, each which one short Code to choose manually the Position column over css in menubuilder.

i dont think ist much work, so Long there is Knowledge for the way.

/*Main nav*/

#main-nav.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
}

#main-nav {
    background: #083a6f;
    padding: 5px 0;
}
.main-navigation ul {
    display: block;
    margin: 0;
    padding: 0;
}

.main-navigation ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 225px;
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
    display: block;
    background-color: #ffffff;
    transition: all 0.2s ease-in-out 0.1s;
    padding: 0 25px;
}

.main-navigation ul li:hover > ul.sub-menu{
    display: block;
    opacity: 1;
    z-index: 1000;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
   transition: all 0.4s ease-in-out 0.1s;
}

.main-navigation ul ul ul {
    left: 114%;
    top: 0;
    border-left: 1px solid #f7f7f76b;
}
.main-navigation li {
    display: inline-block;
    float: left;
    margin-bottom: 0;
    position: relative;
    padding: 15px 22px;
}
.main-navigation li li {
    float: none;
    display: block;
    padding:0;
}

.main-navigation li:first-child {
    padding-left: 0;
}

.main-navigation ul li li:first-child > a {
    border-left: none;
}
.main-navigation ul li a {
    color: #ececec;
    display: block;
    font-size: 17px;
    position: relative;
    z-index: 99;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
<strong>}
.main-navigation ul ul a {
    border-bottom: 1px solid rgba(221, 221, 221, 0.12);
    border-left: medium none;
    border-right: medium none;
    height: auto;
    text-align: left;
    width: 100%;
	
    font-size: 15px;
    padding: 12px 0;
    text-transform: capitalize;
    font-weight: 500;
    color: #323232;
}</strong>

.main-navigation ul ul li:last-child a {
    border: none;
}
.main-navigation ul li.menu-item-has-children > a::after,
.main-navigation ul li.page_item_has_children > a::after {
    content: "\f0dd ";
    margin-left: 10px;
    margin-right: 0;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 13px;
    font-family: FontAwesome;
}

.main-navigation ul li li.menu-item-has-children > a::after,
.main-navigation ul li li.page_item_has_children > a::after {
    top: 15px;
    content: "\f0da";
}

.main-navigation ul li.menu-item-has-children > a,
.main-navigation ul li.page_item_has_children > a {
    padding-right: 15px;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li:hover > a {
    color: #ffffff;
}
.main-navigation ul li.current-menu-item > a:before,
.main-navigation ul li.current_page_item > a:before,
.main-navigation ul li a:hover:before,
.main-navigation ul li:hover > a:before {
    content: "";
    display: block;
    height: 2px;
    background: #fff;
    position: absolute;
    bottom: -18px;
    width: 100%;
}
.main-navigation ul li li.current-menu-item > a:before,
.main-navigation ul li li.current_page_item > a:before,
.main-navigation ul li li a:hover:before,
.main-navigation ul li li:hover > a:before {
    display: none;
}
.main-navigation ul ul li a:hover,
.main-navigation ul ul li.current-menu-item a,
.main-navigation ul ul li.current_page_item a,
.main-navigation ul ul li:hover > a {
    color: #3770ab;
}

.main-navigation .menu-toggle,
.main-navigation .dropdown-toggle {
    display: none;
}

An easy way is written down here:
https://www.prowebdesign.ro/wordpress-sub-menu-items-split-in-2-columns-the-easy-way/

but i am too unable for involve it Right. Maybe this solution is a nice start for success.

hope i find help.

king regards
jan