0

在某种导航栏上，我有一个 div one，其作用类似于导航栏上的一个类别，另一个 div 具有该类别的相关链接。有一个较长的 div，宽度相同，用作栏的背景。我有它，因此通常 divtwo位于相关 div 下方one，当您将鼠标悬停在 div 上时one， divtwo会在其右侧弹出。然后，当您将鼠标移离任一 div 时， divtwo会回到 div 下方one。

我需要解决的问题是我需要长背景 div 保持在 div 下one和 div 之上two，因此 divtwo被隐藏，直到它从背景 div 下滑出，并且在相关 div 的右侧one。

我试过使用z-index，但它似乎没有效果。如果我移动元素的顺序，它只会把它弄得更乱。

编辑：这是 jsfiddle- http://jsfiddle.net/FEKfK/的链接，我在 div 上添加了背景颜色以便于查看。

我需要做的是让黑色背景栏超过红色栏，移动的那个，并且仍然让蓝色 div 留在顶部。这样，红色条将被隐藏，直到您将鼠标悬停在第一个 div 上。

我在 HTML 中拥有的内容：

<div id="behind"></div>
<div id="one"><p id="group">Group 1</p>
    <div id="two">
        <ol>
            <li><a href="example.html">Link 1</a></li>
            <li><a href="example.html">Link 2</a></li>
            <li><a href="example.html">Link 3</a></li>
        </ol>
    </div>
</div>

在 CSS 中：

#one {
    position:relative;
    width:100px;
    height:30px;
    top:10px;
    line-height:27px;
    display:absolute;
    margin:15px 0 0 10px;
    text-align:center;
    z-index:3;
}

#two {
    width:120px;
    height:100;
    overflow:hidden;
    display:inherit;
    line-height:20px;
    position:absolute;
    -webkit-transition:all .5s ease; 
    -moz-transition:all .5s ease; 
    transition:all .5s ease;
    z-index:1;
}

#one:hover > #two {
    display:block;
    left:105px;
    top:0px;
}

#behind {
    width:115px;
    height:444px;
    margin-top:7px;
    position:absolute;
    z-index:2;
}
4

0 回答 0