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

Question

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

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

如何修复 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

也许 IE 无法处理 display: table(-cell) 样式。尝试用普通(内联) block 样式显示它:

#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>