IE 11 ошибка: вложенная навигация не будет отображаться в формате блока - PullRequest
Новая
       12

IE 11 ошибка: вложенная навигация не будет отображаться в формате блока

0 голосов
/ 10 сентября 2018

У меня есть вложенная навигация, которая отлично работает в любом другом браузере, кроме 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

Это то, что отображается в моем IE 11, если я изменил его на .show-menu: hover .leftside-nested-menu display на inline-block:

enter image description here

...