Submenü mit mehreren Spalten erstellen

  • Guten Tag,


    ich habe für meine Wordpresseite ein Submenü mit einer Spalte.


    Das ist zu wenig, ich brauche zwei.


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

    .sub-menu-columns ul.sub-menu li {
    display: inline-block;
    float: left;
    width: 200px;
    }
    .sub-menu-columns ul.sub-menu li:nth-child(odd) {
    float: left;
    margin-right: 10px;
    }
    .sub-menu-columns ul.sub-menu li:nth-child(even) {
    float: right;
    }


    Der rote Teil definiert im CSS das Submenü und der grüne stellt eine Möglichkeit für zwei Spalten, die noch richtig einzubinden wäre. Ich selber habe das nicht geschafft.


    Das Menü im Ganzen ist hier definiert:


    /*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;
    }
    .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;
    }


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


    Habt ihr Ideen zum Zusammenbau?


    Netten Gruß
    Jan