0

我正在尝试使用css（js.fiddle： http: //jsfiddle.net/Zbv6f/6/）制作一个下拉菜单，并且我希望子放置元素出现在父元素下方，但它出现在其上方。我已将放置元素的 z-index 设置为较低的值，但它不起作用。更令人困惑的是，我在上面显示的父级中有一个用 css 制作的箭头，具有相同的 z-index。

有谁可以帮我离开这里吗？

4

2 回答 2

2

我认为您正在尝试在此演示中做类似的事情

HTML添加：

<div id="tab">
    <div class="reviewarrow-top"></div>
    <div class="reviewarrow-bottom"></div>
    Exam Reviews
</div>

CSS 修改/添加：

/* Modifications */
.review-announcement {
    height:55px; 
    width: 165px;
    border:2px #003577 solid;    
    text-align:right;
    position: absolute;
    right: 0px;
    top: 150px;
}

/* Addition */
#tab { 
    position: relative; 
    z-index:5; 
    background: #fff; 
    height: 25px; 
    padding:15px 15px 15px 0;
    color:#003577;
    font-weight:bold;
    font-size:18px;
    right:0px;
}

/* Addition */
#tab:hover {   
    color: #003577;
    background:#FAA301;
}

/* Addition - tab will remain active while container is visible. */
.review-announcement:hover > #tab {
    color: #003577;
    background:#FAA301;
}
于 2012-08-02T06:18:24.040 回答
0

这是我从你的问题中得到的工作演示，

希望这对你有帮助

于 2012-08-02T06:09:25.400 回答