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

我在移动视图中的下拉菜单隐藏在横幅的后面。我似乎无法解决。我已经添加了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;

    }

最佳答案

问题不是问题，真正的问题是您的z-index，只需更改

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%;
}

关于html - 下拉菜单隐藏在div后面，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36747537/