CSS z-index没有正确堆叠

Question

我在使用CSS z-index堆栈时遇到问题.

HTML:

<ul>
    <li><a href="#">Title 1</a></li>
    <li class="dropMenu"><a href="#">Title 2</a>
        <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>

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

我需要获得li.dropMenu比其孩子更高的堆叠顺序ul.我试图改变z-index但没有运气.有没有人知道任何解决方案？我正在尝试创建一个简单的下拉菜单,但是孩子UL似乎始终位于父级之上li.dropMenu.

我给孩子一个盒子阴影,ul但因为它总是在顶部,阴影越过了li.dropMenu

Answer 1

您需要在CSS中为要使用的每个元素设置一个position属性(除了static)z-index.