子菜单项部分隐藏菜单容器

Question

我在页面上修复了菜单栏，但子菜单项只是部分可见，因为部分子菜单位于父菜单的容器下。

这只会在IE上发生，但不会在Firefox或Chrome中发生。

有什么问题？

结构：

<div class="site-branding menu">
<div class="row ">                    
    <div class="col-xs-10 menu-bar">                            
        <nav class="main-navigation" id="site-navigation" role="navigation">
            <div class="menu-mnu-1-container">
                <ul class="menu" id="menu-mnu-2">
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21">
                        <a href="#">Frontpage</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22">
                        <a href="#">Page 1</a></li>
                    <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-25 current_page_item menu-item-has-children menu-item-30">
                        <a href="#">Page 2</a>
                        <ul class="sub-menu">
                            <li><a href="#">Subpage 1</a></li>
                            <li><a href="#">Subpage 2</a></li>
                        </ul>
                    </li>
                </ul>
            </div>                                
        </nav>
    </div>
</div>

CSS：

        .main-navigation li {
        float: left;
        position: relative;
    }

    .site-branding {
        top: 40px !important;
        border-bottom: 0 !important;
    }

    .site-branding {
        width: 100%;
        position: fixed;
        top: 40px;
        height: 80px;
        left: 0px;
        z-index: 99;
        border-bottom: 1px solid rgb(240, 240, 240);
    }

    .menu.site-branding {
        height: 50px !important;
        top: 80px !important;
        padding-bottom: 20px !important;
        z-index: ;
        z-index: 9999;
    }

    .site-branding .row {
        height: 100%;
        line-height: 80px;
        overflow: initial;
    }

    .col-xs-10 {
        width: 83.33%;
    }

    .site-branding .row [class*='col-'] {
        height: 100% !important;
        line-height: 30px !important;
    }

    .site-branding .row [class*='col-'], .site-title {
        height: 100%;
        line-height: 80px;
    }

    .main-navigation {
        clear: both;
        display: block;
        float: left;
        width: 100%;
    }

    .main-navigation {
        border: 1px solid #cdcdcd !important;
        border-radius: 5px !important;
        margin: 10px 0 0 0 !important;
    }

    .menu-mnu-1-container {
        position: relative !important;
        text-align: left !important;
    }

    .main-navigation ul {
        list-style: none;
        margin: 0;
        padding-left: 0px;
    }
    .main-navigation ul.menu {
        margin: 0 !important;
        padding-left: 0px !important;
        position: relative !important;
    }
    .main-navigation#site-navigation .menu {
        float: right;
    }
    .menu ul li {
        margin: 0 3px !important;
        padding: 0 7px !important;
    }

    .main-navigation a {
        display: block;
        text-decoration: none;
    }


    .main-navigation ul ul a {
        width: 240px !important;
    }

    .main-navigation#site-navigation li a {
        padding: 0 10px;
        color: #000;
    }

    .main-navigation ul ul {
        display: none;
        float: left;
        left: 0px;
        position: absolute;
        z-index: 9;
        padding: 0 0 0 10px;
    }

    .main-navigation ul ul li {
        line-height: initial;
        line-height: 30px;
    }

    .menu ul li ul li {
        margin: 0 !important;
        padding: 0 !important;
    }

Answer 1

尝试添加

ul.submenu { 
z-index: 100;
}

到样式表