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

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

Answer 2

考虑您的层次结构。 background元素和下拉元素都应该在同一级别上。背景元素包含下拉元素的事实，您将无法将其z-index成遗忘。将您的背景应用于div.header-container，然后将div.nav向上移动一级（从div.header-container转移到div.header），您就可以解决此问题。当然，在一些定位的帮助下，你将能够达到你的目标。

试图在背景后面的z-index subnav

2 个答案: