3

所以我正在尝试创建一个从背景图像后面弹出的下拉导航。我认为最好的方法是使用 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>
4

2 回答 2

0

考虑你的层次结构。背景元素和下拉元素应该在同一级别。背景元素包含下拉元素的事实，您将无法将其 z-index 到遗忘。将您的背景应用到div.header-container，然后div.nav向上移动一个级别（从 中移出div.header-container，进入div.header），您将能够解决此问题。当然，在一些定位的帮助下，您将能够准确地实现您的目标。

于 2012-07-17T14:39:38.880 回答
0

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

于 2012-07-17T14:36:10.417 回答