Question

I am trying to make a drop menu with css (js.fiddle: http://jsfiddle.net/Zbv6f/6/) and I want the child drop element to appear underneath the parent, but it appears above it. I have set the z-index for the drop element to a lower value but it is not working. Even more confusing, I have an arrow made with css in the parent that does display above, with the same z-index.

Can anyone help me out here?

Answer 1

I think you are trying to do something like in this DEMO

HTML Addition:

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

CSS Modifications/Additions:

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