Wordpress CSS, customizing menu - html

Question

So, I've tried to implement a two column menu into my wordpress, using this CSS code which I’ve found on the internet:
.sub-menu-columns .sub-menu{
display:inline-block;
width:500px !important;
background-color:#FFFFFF;
}
.sub-menu-columns .sub-menu li{
width:50% !important;
}
.sub-menu-columns .sub-menu li a:hover{
color:#FFFFFF;
}
.sub-menu-columns .sub-menu li:nth-child(even){
float:right;
border-left:2px;
border-color: #404040;
}
I added .sub-menu-columns as a CSS class for the top-level-menu “Products” at which only!! the two column sub menu should be seen.
I managed to get this to work. Now is the problem, since the menu is bigger in width, that I need to move the sub-menu container to the left. I also managed to solve this issue with this code:
#mainnav ul li ul{
left:-400px;
}
Now is the only thing, that all other Menus with submenus are moved to the left too (as you can see with “Contact/Support”)
My logical approach would be to edit the previous code to:
#mainnav .sub-menu-columns .sub-menu ul li ul{
left:-400px;
}
In addition, adding border-left doesnt bring any border up.
Here is how it looks like:
And this is how it should look like:
My current custom CSS script for the menu (with double colums, moving to the left and the Bootstrap Arrow-up back to the righ which is the ::before):
.sub-menu-columns .sub-menu{
display:inline-block;
width:500px !important;
background-color:#FFFFFF;
}
.sub-menu-columns .sub-menu li{
width:50% !important;
}
.sub-menu-columns .sub-menu li a:hover{
color:#FFFFFF;
}
.sub-menu-columns .sub-menu li:nth-child(even){
float:right;
}
#mainnav ul li a{
border-left:2px;
border-color: #404040;
}
#mainnav ul li ul{
left:-400px;
border-left:2px;
border-color: #404040;
}
#mainnav ul li ul::before{
left:450px;
}
However that is not working.
Any ideas maybe? Since I've heard many people use lately jsFiddle for helping out, I'm not sure if I've done it right, but this is what I could provide for you: https://jsfiddle.net/mve1wdfd/
Website: https://xs-sol.com/
Thank you for your help!
Update: I think the main issue is that I'm unable to combine the id=mainnav with other classes and ul's, il's a:hover's and so on.