嵌套UL中的Z索引

我在CSS菜单中的Z索引有问题。我使用嵌套的ul标签构建菜单。嵌套UL中的Z索引

显然，第一个ul是菜单层次结构中的第一个层次。作为第一个ul的背景属性，我设置了一个渐变和一个box-shadow，当然都是用CSS。

第二个ul（嵌套的）是菜单层次结构中的第二个层次。我给它一个灰色的背景色。

不幸的是，第二个ul覆盖了第一个ul。我试图与z-index一起玩，但我无法让它工作。我想在第一个ul的阴影上嵌套ul。

这里是代码，以便您可以复制它：

CSS：

ul.menu { 
    /* Gradient: */ 
    background: #444; 
    background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#777)); 
    background: -moz-linear-gradient(top, #999, #777); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999', endColorstr='#777'); 
    height: 25px; 
    /* Box-Shadow: */ 
    -moz-box-shadow: 1px 3px 3px #888; 
    -webkit-box-shadow: 1px 3px 3px #888; 
    box-shadow: 1px 2px 3px #888; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; 
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); 
    position: relative; 
    z-index: 20; 
} 

ul.menu, ul.menu ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

ul.menu a { 
    display: block; 
    text-decoration: none; 
    color: #000; 
    line-height: 22px; 
    padding-right: 15px; 
    padding-left: 15px; 
} 

ul.menu li { 
    padding:0; 
    margin:0; 
    float:left; 
} 

ul.menu ul { 
    margin-left: 15px; 
    padding: 0; 
    position: absolute; 
    display: none; 
    background-color: #CCC; 
    z-index: 10; 
} 

ul.menu li:hover ul { 
    display: block; 
} 

ul.menu ul li { 
    float: none; 
}

下面是HTML：

<ul class="menu"> 
    <li><a href="#">ONE</a> 
    <ul> 
     <li><a href="#">SUB_ONE</a></li> 
     <li><a href="#">SUB_TWO</a></li> 
     <li><a href="#">SUB_THREE</a></li> 
    </ul> 
    </li> 
    <li><a href="#">TWO</a></li> 
    <li><a href="#">THREE</a></li> 
</ul>

有什么办法第一UL覆盖的第二个UL还是只是不可能？感谢您的任何帮助！

的问候，麦克

一些测试后

来源

2011-08-31 Mike

不是看起来很有希望：http://stackoverflow.com/questions/2503705/html-how-to-get-a-child-element-to-show-behind-lower-z-索引比其父亲 –

我有一个解决方法。通过在具有自己阴影的嵌套UL上方插入DIV，可以在子菜单上获取它。

参见：http://jsfiddle.net/SLkrN/6/

来源

2011-08-31 18:05:23

嘿，那真的很好。非常感谢你！适用于Firefox，Opera和Safari（尚未在IE中测试过）。我只需要看看我是否可以改进这个影子，但这绝对是正确的方向！ – Mike

如果您所追求的只是下拉阴影，您可能会考虑将1px高的div移动到“LI”上方的子菜单中以避免潜在的点击阻止。 – stslavik

我找到了一个不同的解决方案。相同的想法，不同的实施。 http://www.pamgriffith.net/blog/complex-uses-of-css3-box-shadow –

短的答案似乎是：即便将所有的元素浮动，父在子菜单的遏制.menuul是导致他们不z-index的变化做出反应相对而言除外，绝不低于母体UL。我会继续试验。但是，我可以建议将子菜单设置得更低，以便它们至少与父项ul的底部内联？

ul.menu ul { 
    margin-left: 15px; 
    margin-top: 5px; 
    padding: 0; 
    position: absolute; 
    display: none; 
    background-color: #CCC; 
    z-index: 10; 
}

来源

2011-08-31 17:24:46 stslavik

OP已经有了这个。 –

哎呦。绝对正确。我很抱歉。那我立即纠正。 – stslavik

你应该在它被拒绝之前删除你自己的答案。 –

嵌套UL中的Z索引

回答

相关问题