Menu CSS not working properly in IE11

Question

Quick Note: I can't actually look if the answers given can help me until next monday unfortunately

I have a menu with some submenu's (2 levels deep) and have all the CSS working in Chrome but it doesn't show properly in IE11. Whats even weirder is that the same menu completely screws up when it's viewed from my local test server and works (almost) fine when viewed on the remote server. The problem lies in the sub menu. when hovering the top level the sub menu should be displayed beneath the top level but in IE it is displayed over the top level. You can see the example at http://dev.votob.nl (view in Chrome/Firefox for the desired result).

How can i fix the positioning in IE11?

JSFiddle Demo

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

Answer 1

Move position : relative from .menu-main-container > ul > li to .menu-main-container > ul.

Then you can remove the top : 100% style.

Answer 2

Maybe IE cannot handle the display: table(-cell) styles. Try to display it with ordinary (inline-)block styles:

#menu {
    padding: 0;
    margin: 0;
    white-space: nowrap;
    font-size: 0;
    position: relative;
}
#menu * {
    font-size: 16px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#menu a {
    text-transform: capitalize;
    text-decoration: none;
    color: #000;
    display: block;
}
#menu > li {
    display: inline-block;
    width: 20%;
    text-align: center;
}
#menu > li ul {
    text-align: left;
}
#menu > li:hover {
    background: #003cb3;
}
#menu > li:hover > a {
    color: #fff;
}
#menu > li > ul {
    background: #fff;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    padding: 25px 25px 0 25px;
}
#menu > li:hover > ul {
    display: block;
}
#menu > li > ul > li {
    margin-bottom: 25px;
    width: 50%;
}
#menu ul li:hover > a {
    color: #039;
}
#menu > li > ul > li > ul {
    display: none;
    position: absolute;
    left: 50%;
    right: 0;
    top: 0;
    padding: 25px 25px 0 25px;
}
#menu > li > ul > li:hover > ul {
    display: block;
}
#menu > li > ul > li > ul > li {
    margin-bottom: 25px;
    width: 100%;
}

<ul id="menu">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a>
        <ul>
            <li><a href="#">sub item 1</a></li>
            <li><a href="#">sub item 2</a></li>
            <li><a href="#">sub item 3</a>
                <ul>
                    <li><a href="#">sub sub item 1</a></li>
                    <li><a href="#">sub sub item 2</a></li>
                    <li><a href="#">sub sub item 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">login</a></li>
</ul>
<p>Next element</p>