css - CSS ドロップ メニューが正しくスタックされない

Question

css (js.fiddle: http://jsfiddle.net/Zbv6f/6/ )でドロップ メニューを作成しようとしていますが、子ドロップ要素を親の下に表示したいのですが、その上に表示されます。ドロップ要素の z-index をより低い値に設定しましたが、機能していません。さらに紛らわしいのは、親に css で作成された矢印があり、同じ z-index で上に表示されていることです。

誰か助けてくれませんか？

Answer 1

このDEMOのようなことをしようとしていると思います

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;
}

Answer 2

これがあなたの質問から得たものの動作デモです。

これがあなたに役立つことを願っています