0

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?

user1490248
  • 139
  • 2
  • 6
  • this is bcoz both the child drop element and the arrow are contained within the parent and hence giving higher z-index to arrow is placing it above the drop element with lower z-index(as they are siblings) but the lower z-index given to child drop element is not working as it is contained within parent and you are trying to place it above it – Uttara Aug 02 '12 at 05:53
  • http://jsfiddle.net/Zbv6f/8/ There are a couple of fixes. See if that helps you at all. – Chad Aug 02 '12 at 05:56
  • also You can get a better explanation [`here`](http://stackoverflow.com/questions/1806421/css-parent-element-to-appear-above-child) of what you are asking for – Uttara Aug 02 '12 at 06:14
  • @user1490248: See my answer with a solution given below. – Ahsan Khurshid Aug 02 '12 at 06:21

2 Answers2

2

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;
}
Ahsan Khurshid
  • 9,383
  • 1
  • 33
  • 51
0

here is working Demo of what I got from your question,

hope this helps you

Uttara
  • 2,496
  • 3
  • 24
  • 35