html - 下拉菜单隐藏在div后面

Question

我在移动 View 中的下拉菜单隐藏在我的横幅后面。我似乎无法修复它。我已经添加了 z-index，我已经高达 999，但仍然没有区别。

这是 test page

这是 HTML:

<li class="dropdown">
     <a class="dropdown-toggle provinces-btn" data-toggle="dropdown">Select Province<span class="caret"></span></a> 
     <ul class="dropdown-menu">
         <li><a href="#">Alberta</a></li>
         <li><a href="#">British Columbia</a></li>
         <li><a href="#">Manitoba</a></li>
         <li><a href="#">New Brunswick</a></li>
         <li><a href="#">Newfoundland and Labrador</a></li>
         <li><a href="#">Nova Scotia</a></li>
         <li><a href="#">Nunavut</a></li>
         <li><a href="#">Ontario</a></li>
         <li><a href="#">Prince Edward Island</a></li>
         <li><a href="#">Quebec</a></li>
         <li><a href="#">Saskatchewan</a></li>

     </ul>  
   </li>

这是 CSS:

.dropdown-menu {
    left: 40% !important;
    margin-left: -30px;
   z-index: 50;
}


@media screen and (max-width: 768px) {
.provinces-btn {

    width: 100%;
    margin-top: 1px;
    border-radius: 12px;
    background-color: #3498db;
    border-color: rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    color: #FFF !important;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    padding: 10px 30px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.3);
    border-bottom-width: 3px;
    text-decoration: none;
    z-index: 60;



}

    .provinces-btn:hover, .provinces-btnActive {
        color: #FFEE00 !important;
        background: #1975D1;
        font-weight: 900;
    }

    .provinces-btn ul{
        margin: 0 auto;
    }

}

@media screen and (max-width: 604px) {
.provinces-btn {

    width: 100%;
    margin-top: 1px;
    margin-left: 15px;
    border-radius: 12px;
    background-color: #3498db;
    border-color: rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    color: #FFF !important;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    padding: 10px 30px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.3);
    border-bottom-width: 3px;
    text-decoration: none;
    z-index: 60;

   }

       .provinces-btn:hover, .provinces-btnActive {
        color: #FFEE00 !important;
        background: #1975D1;
        font-weight: 900;
    }
    .provinces-btn ul{
        margin: 0 auto;
    }

 }

其他带有 z-index 的 CSS，我不确定它是否会影响它:

nav {
        padding: 0;
        position:relative;
        z-index:10;
        height: 0;
    }

    .showMenu {
        display: block;
        background: url() no-repeat center;
        background-size: 48px 48px;
        height: 80px;
        right: 0;
        top: 0;
        text-indent: -999999px;
        font-size: 0;
        position: absolute;
        z-index:11;
        border-left: 1px solid #DDDDDD;

    }

Answer 1

问题不是z-index问题真正的问题是你的header，只是改变

header {
    width: 100%;
    height: auto;
    background: #FFFFFF;
    overflow: auto;
    overflow-y: hidden;
    overflow-x: hidden;
    margin-bottom: 2%;
}

到

header {
    width: 100%;
    height: auto;
    background: #FFFFFF;
    margin-bottom: 2%;
}