菜单CSS在IE11中无法正常工作

快速说明：不幸的是，直到下周一，我才能真正找到给出的答案是否对我有帮助

我有一个带有一些子菜单的菜单（深2级），并且所有CSS都可以在Chrome中使用，但在IE11中无法正确显示。甚至更奇怪的是，从我的本地测试服务器查看该菜单时，该菜单完全搞砸了，而在远程服务器上查看时，该菜单几乎可以正常工作。问题出在子菜单上。当将鼠标悬停在顶层上时，子菜单应显示在顶层下，但在IE中，子菜单将显示在顶层上。您可以在http://dev.votob.nl上查看示例（在Chrome / Firefox中查看所需的结果）。

如何修复IE11中的位置？

JSFiddle演示

HTML：

<div class="menu-main-container">
    <ul id="menu-main" class="menu">
        <li id="menu-item-1"> <a href=#>Item1</a>

        </li>
        <li id="menu-item-2"> <a href=#>Item2</a>

            <ul class="sub-menu">
                <li id="menu-item-5"> <a href="#">Sub Item 1</a>

                </li>
                <li id="menu-item-6"> <a href="#">Sub Item 2</a>

                </li>
                <li id="menu-item-7"> <a href="#">Sub Item 3</a>

                    <ul class="sub-menu">
                        <li id="menu-item-8"> <a href="#">Sub Sub Item 1</a>

                        </li>
                        <li id="menu-item-9"> <a href="#">Sub Sub Item 2</a>

                        </li>
                        <li id="menu-item-10"> <a href="#">Sub Sub Item 3</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="menu-item-3"> <a href=#>Item3</a>

        </li>
        <li id="menu-item-4"> <a href=#>Item4</a>

        </li>
    </ul>
</div>

的CSS

/*top level*/
 .menu-main-container > ul {
    text-align : left;
    display : table;
    list-style : none;
    text-transform : capitalize;
    text-decoration : none;
    padding : 0;
    margin : 0;
    width : 100%;
    height : 100%;
}
.menu-main-container ul > li {
    text-align : left;
}
.menu-main-container > ul > li {
    width: auto;
    display : table-cell;
    position : relative;
    cursor : pointer;
    vertical-align : middle;
    text-align : center;
}
.menu-main-container ul li a {
    text-transform : capitalize;
    text-decoration : none;
    color : #000000;
    font-weight : bold;
    font-size : 16px;
}
/*sub menu level 1*/
 .menu-main-container > ul > li:hover {
    background-color : #003cb3;
}
.menu-main-container > ul > li:hover > a {
    color : #fff;
}
.menu-main-container > ul > li > ul {
    position : absolute;
    top : 100%;
    width : 565px;
    display : none;
    opacity : 0;
    visibility : hidden;
    background-color : #FFFFFF;
    padding : 25px 25px 0px 25px;
}
.menu-main-container > ul > li > ul > li {
    display : block;
    color : #000000;
    width : 50%;
    list-style-type : none;
    margin-bottom: 25px;
}
.menu-main-container > ul > li > ul > li > a {
}
.menu-main-container > ul > li > ul > li:hover > a {
    color : #003399;
}
.menu-main-container > ul > li:hover > ul {
    display : block;
    opacity : 1;
    visibility : visible;
}
/*sub menu positionering*/
 .menu-item-256 > ul.sub-menu {
    left : -299px;
}
/*sub menu level 2*/
 .menu-main-container > ul > li:hover > ul > li > ul {
    padding : 25px 25px 0px 25px;
    ;
    position : absolute;
    top : 0;
    width : 42%;
    left : 50%;
    margin-left: 0;
    display : none;
    opacity : 0;
    visibility : hidden;
}
.menu-main-container > ul > li > ul > li > ul > li {
    list-style-type : none;
}
.menu-main-container > ul > li:hover > ul > li > ul > li {
    border : none;
    margin-bottom: 25px;
    margin-right : 0;
}
.menu-main-container > ul > li:hover > ul > li:hover > ul {
    display : block;
    opacity : 1;
    visibility : visible;
}
.menu-main-container > ul > li:hover > ul > li > ul > li > a {
    color : #000000;
}
.menu-main-container > ul > li:hover > ul > li > ul > li:hover > a {
    color : #003399;
}