header ul ul ul.third-level {
    display: none;
}

ul ul li:hover ul.third-level {
    position: absolute;
    background-color: #fff;
    min-width: 300px;
    display: block;
    z-index: 99999;
    left: 100%;
    clear: both;
    display: block;
}

ul.main-menu li {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

ul.main-menu li i {
    color: #6d6d6d;
}

ul.main-menu {
    display: flex;
}

ul.main-menu i {
    cursor: pointer;
}

ul.main-menu li a {
    display: block;
    padding: 10px 4px 10px 15px;
    font-size: 16px;
    color: #6d6d6d;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s;
}

ul.main-menu li ul li a {
    padding: 5px 10px;
}

ul.main-menu li a:hover {
    background: #fff;
    color: #1890c9;
}

ul.main-menu ul.second-menu {
    visibility: hidden;
    opacity: 0;
    min-width: 150px;
    position: absolute;
    top: 150%;
    left: 0;
    transition: all 0.3s;
}



ul.main-menu li:hover>ul.second-menu {
    top: 100%;
    visibility: visible;
    opacity: 1;
    z-index: 999;
    background-color: #fff;
    box-shadow: 1px 1px 9px 0px #bdbbbb;
    min-width: 250px;
    
}



ul.main-menu ul.second-menu.visible {
    visibility: visible;
    opacity: 1;
    top: 100%;
    z-index: 999;
    background-color: #fff;
    box-shadow: 1px 1px 9px 0px #bdbbbb;
    min-width: 250px;
/*    padding: 10px;*/
}

ul.main-menu ul.second-menu ul.third-menu {
    left: 100%;
    background-color: #fff;
    min-width: 250px;
    box-shadow: 1px 1px 9px 0px #bdbbbb;
    padding: 10px;
}

ul.main-menu ul.second-menu ul.third-menu {
    display: none;
    min-width: 150px;
    position: absolute;
    top: 150%;
    transition: all 0.3s;
    z-index: 50;
}

/*  ul.main-menu ul.second-menu li:hover > ul.third-menu {
    top: 0;
    visibility: visible;
    opacity: 1;
  }*/

ul.main-menu ul.second-menu ul.third-menu.visible {
    top: 0;
    display: block;
    box-shadow: 1px 1px 9px 0px #bdbbbb;
}

ul.main-menu {
    max-width: 1000px;
    margin: 25px auto;
}

/* .second-menu li:hover .third-menu{
    top: 0 !important;
    display: block !important;
    box-shadow: 1px 1px 9px 0px #bdbbbb !important;
} */

ul.second-menu li:hover>ul.third-menu {
    top: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 999 !important;
    background-color: #fff !important;
    box-shadow: 1px 1px 9px 0px #bdbbbb !important;
    min-width: 250px !important;
    padding: 10px !important;
    display: block !important;
    /* top: 0;
    display: block;
    box-shadow: 1px 1px 9px 0px #bdbbbb; */
}

ul.second-menu li{
    padding: 2px 10px !important;
}
ul.second-menu li:first-child {
    padding-top: 10px !important;
}
ul.second-menu li:last-child{
padding-bottom: 10px !important;
}
ul.third-menu li:first-child {
    padding-top: 0 !important;
}
ul.third-menu li:last-child{
padding-bottom: 0 !important;
}



/*
  
  * Why not use classes?
  To keep the specificity as low as possible and therefore make this code easy to extend. Therefore I used the "nav" element selctor as basis for all selectors to just affect the styling of nav menus.
  
  * How to add "Submenu arrows" to visualize that there is a submenu?
  This can only be handeled via classes. Add something like "has-submenu" to the li that has a submenu.
  I only wanted to use element selectors in this example to keep the specificity low.
  
  */