html - IE 11 错误：嵌套导航不会以块格式显示

Question

我有一个嵌套导航，它在所有其他浏览器中都可以正常工作，当然 IE 11 除外。HTML 如下：

<nav id="nav">
        <div class="left">
            <div class="holder">
                <ul class="leftside-menu">
                    <li class="show-menu"><a href="">Benefits</a>
                        <ul class="leftside-nested-menu">
                            <li><a href="Design.aspx">Design</a></li>
                            <li><a href="Performance.aspx">Performance</a></li>
                            <li><a href="Installation.aspx">Installation</a></li>
                        </ul>
                    </li>
                    <li class="hideIt"><a href="Design.aspx">Design</a></li>
                    <li class="hideIt"><a href="Performance.aspx">Performance</a></li>
                    <li class="hideIt"><a href="Installation.aspx">Installation</a></li>
                    <li><a style="z-index: 10;" href="Testing.aspx">Testing</a></li>
                    <li><a class="getWidth" href="Resources.aspx">Resources</a></li>
                    <li><a href="map">Map</a>
                </ul>
            </div>
        </div>
</nav>

这是显示的 CSS：

            .leftside-menu {
                display: inline;
                padding: 0;
            }

                .leftside-menu li {
                    display: inline;
                    list-style-type: none;
                    position: relative;
                }

            .leftside-nested-menu {
                position: absolute;
                display: none;
                z-index: -1;
            }

                .leftside-nested-menu li:nth-child(n+2) a {
                    margin: 0;
                }

            .show-menu:hover > a {
                color: #b99a3a;
            }

            .show-menu:hover .leftside-nested-menu {
                display: inline-block;
                top: 40px;
            }

            nav.sticky .leftside-nested-menu {
                background-color: rgba(255, 255, 255, 0.95);
                padding: 0 25px 15px;
            }

            .leftside-menu li.hideIt {
                display: none;
            }

            @media only screen and (max-width: 1028px) {
                .leftside-menu li.hideIt {
                    display: block;
                }

                .leftside-menu li.show-menu, .leftside-menu li.show-menu a {
                    display: none;
                }
            }

我不确定还有什么其他选择。我试过 display: inline 在 IE 开发人员工具中，它适用于垂直显示，但它把它推到一边。它不尊重相对父级中的绝对定位。还有其他想法可以完成这项工作吗？提前致谢。CODEPEN：https ://codepen.io/sazad/pen/YOeQPp

如果我将其更改为 .show-menu:hover .leftside-nested-menu 显示为内联块，这就是我的 IE 11 中显示的内容：

标签： htmlcssinternet-explorer-11nav