CSS z-index not stacking correctly
I am having trouble with CSS z-index stacking.
HTML:
<ul>
<li><a href="#">Title 1</a></li>
<li class="dropMenu"><a href="#">Title 2</a>
<div class="containerDropDown">
<ul class=开发者_StackOverflow"menu">
<li><a href="#">Lorem ipsum link</a></li>
<li><a href="#">Lorem ipsum dolor sit met link amet ipsum link</a></li>
<li><a href="#">Dolor sit amet link</a></li>
<li><a href="#">Lorem ipsum link</a></li>
<li><a href="#">Dolor sit amet link</a></li>
<li><a href="#">Lorem ipsum link</a></li>
</ul>
</div>
</li>
<li><a href="#">Title 3</a></li>
<li><a href="#">Title 4</a></li>
<li><a href="#">Title 5</a></li>
</ul>
CSS:
li.dropMenu {
z-index:100;
}
.dropMenu:hover {
padding-bottom:9px;
border:1px solid #575a5d;
border-bottom:0;
background-color:#434749;
position:relative;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
box-shadow:0 0 10px #000;
z-index:100;
}
.dropMenu:hover a {
padding:0 9px;
color:#8f6f4d;
}
.dropMenu ul {
width:198px;
left:-999em;
padding:16px 0 0 0;
border:1px solid #575a5d;
background-color:#434749;
position:absolute;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
box-shadow:0 0 5px #000;
}
.dropMenu:hover ul {
/*top:32px;*/
top:10px;
left:-1px;
z-index:20;
}
.dropMenu ul li {
display:block;
width:100%;
padding:0;
z-index:70;
}
.dropMenu:hover ul li a,
.dropMenu ul li a{
display:block;
padding:0 30px 22px 30px;
font-size:0.8em;
color:#d0cfcb;
background:transparent url("/images/background/dropDownMenu-arrow.gif") no-repeat 21px 4px;
}
I need to get li.dropMenu
to have a higher stacking order than its child ul
. I tried to change the z-index but with no luck. Does any one know of any solutions? I am trying to create a simple drop down menu but the child UL seems to be always on top of the parent li.dropMenu
.
I am giving a box-shadow to the child ul
but because its always on top the shadow goes over the li.dropMenu
You need to set a position
attribute (other than static
) in your CSS for each element you want to use z-index
on.
You need to give the li.dropMenu
a position
in order for the z-index
to work.
Try
li.dropMenu {
z-index:100;
position:relative;
}
More info here:
z-index specifies the stack level of a box whose position value is one of absolute, fixed, or relative.
http://reference.sitepoint.com/css/z-index
The problem that you have is that an absolutely-positioned element is placed relative to it's closest ancestor with a non-static (i.e., relative, absolute, fixed) positioning. So your child z-index is applied only within the context of the parent element, not in comparison to it. Solution: place the content of the parent in a sibling of the child:
<ul>
<li><a href="#">Title 1</a></li>
<li class="dropMenu">
<div class="parentItemHolder"><a href="#">Title 2</a></div>
<div class="containerDropDown">
<ul class="menu">
<li><a href="#">Lorem ipsum link</a></li>
<li><a href="#">Lorem ipsum dolor sit met link amet ipsum link</a></li>
<li><a href="#">Dolor sit amet link</a></li>
<li><a href="#">Lorem ipsum link</a></li>
<li><a href="#">Dolor sit amet link</a></li>
<li><a href="#">Lorem ipsum link</a></li>
</ul>
</div>
</li>
<li><a href="#">Title 3</a></li>
<li><a href="#">Title 4</a></li>
<li><a href="#">Title 5</a></li>
</ul>
With the CSS (note, I've removed some of the original for brevity):
.dropMenu {
position: relative;
}
.dropMenu:hover div.parentItemHolder {
padding-bottom:9px;
border:1px solid #575a5d;
border-bottom:0;
background-color:#434749;
position:relative;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
box-shadow:0 0 10px #000;
z-index:100;
}
.dropMenu ul {
width:198px;
display: none; /* using display: none; instead of left: -999em; */
padding:16px 0 0 0;
border:1px solid #575a5d;
background-color:#434749;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
box-shadow:0 0 5px #000;
}
.dropMenu:hover ul {
display: block;
position: absolute;
z-index:20;
}
z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
start by removing the z-indices
then you should be targeting the siblings a
and .containerDropDown
, or remove .containerDropDown
and just use the ul
instead.
then you just need to add:
.dropMenu>a{position:relative;z-index:2}
which is much easier than trying to make a child z-index less than parent.
made a fiddle: http://jsfiddle.net/filever10/TbJt3/
精彩评论