为什么导航栏下拉菜单不在背景元素前面？

Question

在我的网页上，无法将导航栏下拉菜单显示在iphone 8+的背景图片前面。它适用于我的三星J5。我已经尝试过Z-index。

有人可以帮忙吗？

#mynavbar {
    position: relative;
}
.navbar {
    border: none;
    background-color: white;
    height: 10px;
}
.navbar-collapse, .navbar-toggle {
    margin-top: 2.5vh;
}
.nav {
    z-index: 999 !important;
    background-color: lightgrey;
}
.home_opt {
    z-index: 999 !important;
    background-color: grey;
}
.contact_opt {
    z-index: 999 !important;
    background-color: grey;
}

    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/webThemesLogoBlack-smallest.jpg"  alt="sydney"/></a>
            </div>

            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right menu">
                    <li class="active home_opt"><a href="index.php">Home</a></li>
                    <li class="contact_opt"><a href="contact.php">Contact Us</a></li>
                </ul>
            </div>
        </div>
    </nav>

Answer 1

尝试将z-index放在#mynavbar而不是.nav