Wordpress CSS，自定义菜单

Question

所以，我试图在我的wordpress中实现一个两列菜单，使用我在互联网上找到的CSS代码：

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

我添加了.sub-menu-columns作为顶级菜单“产品”的CSS类，只有!!应该看到两列子菜单。

我设法让这个工作。现在是问题，因为菜单的宽度更大，我需要将子菜单容器移到左边。我还设法用这段代码解决了这个问题：

#mainnav ul li ul{
    left:-400px;
}

现在唯一的事情是，所有其他带有子菜单的菜单也会向左移动（正如您可以通过“联系/支持”看到的那样）

我的逻辑方法是将以前的代码编辑为：

#mainnav .sub-menu-columns .sub-menu ul li ul{
    left:-400px;
}

此外，添加border-left不会带来任何边框。

以下是它的样子：

这就是它应该是这样的： 我当前为菜单定制的CSS脚本（带有双列，向左移动，Bootstrap向上箭头向上返回到之前的::）：

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

然而，这是行不通的。 也许有什么想法？由于我听说很多人最近使用jsFiddle帮忙，我不确定我是否做得对，但这是我能为你提供的：https://jsfiddle.net/mve1wdfd/ 网站：https://xs-sol.com/ 谢谢你的帮助！

更新：我认为主要的问题是我无法将id = mainnav与其他类和ul结合起来，il是a：hover's等等。