html - 尝试在背景后使用 z-index 子导航

Question

所以我正在尝试创建一个从背景图像后面弹出的下拉导航。我认为最好的方法是使用 z-index，但我似乎无法让它工作......这是链接，看一看你就会明白我想要做什么:http://cottonwood.towermarketing.net/ .基本上，当您将鼠标悬停在顶部导航元素上时，我希望子导航从撕破的羊皮纸后面滑出。我一直在努力解决这个问题。下面是我的 CSS 和 HTML，如果需要更多，我可以发布更多。任何帮助都会很棒!

CSS:

.header {
    background: url(../../assets/images/repeatable-tear.png) repeat-x;
    height: auto;
    position: absolute;
    z-index: 1;
    width: 100%
}

.top-nav {
    z-index: 1  
}

.sub-nav {
    position:absolute;
    left:0;
    display:none;
    margin:0 0 0 -1px;
    padding:0;
    list-style:none;
    background: #4e8abe;
    z-index: -1;
}

HTML:

<div class="header">
    <div class="header-container">
        <div class="nav">
            <ul class="menu">
                <li class="top-nav"><a href="#">Home</a></li>
                <li class="top-nav"><a href="#">One</a>
                    <ul class="sub-nav">
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                    </ul>
                </li>
                <li class="top-nav"><a href="#">Two</a>
                    <ul class="sub-nav">
                         <li><a href="#">One</a></li>
                         <li><a href="#">Two</a></li>
                         <li><a href="#">Three</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

好的，根据一些评论，我将其更改为这个，但我只能让整个导航落后，而不仅仅是子导航:

CSS .header { 高度:自动； 宽度:100%

.header-bg {
    background: url(../../assets/images/repeatable-tear.png) repeat-x;
    height: 175px;
    position: absolute;
    z-index: 1;
    width: 100%
}

HTML

<div class="header">
    <div class="header-bg"></div>
    <div class="header-container">
        <div class="nav">
            <ul class="menu">
                <li class="top-nav"><a href="#">Home</a></li>
                <li class="top-nav"><a href="#">One</a>
                    <ul class="sub-nav">
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                    </ul>
                </li>
                <li class="top-nav"><a href="#">Two</a>
                    <ul class="sub-nav">
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>          
</div>

Answer 1

您需要在 header 元素之外设置子导航菜单。现在它们与标题(背景所在的位置)处于相同的堆叠上下文中，因此无论您的 z-index 值如何，它们都会显示在背景图像的顶部。