html - 大型下拉框上的阴影

Question

我对大型下拉菜单的框阴影有一点疑问。阴影应该在“第二个列表项”上方可见，并且只有实际的 :hover li 元素应该在下拉框的阴影上方。我尝试设置位置和 z-index 属性的不同变体，但无法解决。

HTML:

<ul>
    <li>first list item
        <div id="sub">Sed id dolor nec odio cursus tincidunt. Ut tristique nulla odio, vitae ornare ligula tincidunt vitae. Sed cursus, erat eleifend bibendum auctor, quam diam pellentesque eros, ut consequat quam erat non ipsum. Cras ut ultrices leo. Aliquam blandit scelerisque sem at volutpat.</div>
    </li>
    <li>second list item</li>
</ul>

CSS:

ul {
    padding: 0;
    margin: 0.2em;
}
ul li {
    background: orange;
    width: 175px;
    height: 22px;
    display: inline-block;
    position: relative;
    transition: all .25s ease;
    padding: 5px;
    margin 0;
    cursor: pointer;
}
ul li #sub {
    background-color: #222;
    width: 300px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
    position: absolute;
    left: 0px;
    top: 32px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s ease, opacity 0.2s ease;
    z-index: -20;
    padding: 0.7em;
    color: white;
    cursor: initial;
}
li:hover #sub {
    visibility: visible;
    opacity: 0.9;
    transition-delay: 0s;
}

http://jsfiddle.net/R4xRJ/

我该如何解决？有什么想法吗？

Answer 1

因为子菜单仅在以下 <li> 上转换阴影元素，您可以使用 + 实现您的 objective-c SS 选择器。它将允许您在下一个 li 上指定负 z-index在标记中。

DEMO

你需要添加

ul li:hover + li{
    z-index:-2;
}

和z-index:-1;至 ul li .sub

完整的 CSS:

ul {
    padding: 0;
    margin: 0.2em;
}
ul li {
    background: orange;
    width: 175px;
    height: 22px;
    display: inline-block;
    position: relative;
    transition: all .25s ease;
    padding: 5px;
    margin 0;
    cursor: pointer;
}
ul li:hover + li{
    z-index:-2;
}
ul li .sub {
    background-color: #222;
    width: 300px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
    position: absolute;
    left: 0px;
    top: 32px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s ease, opacity 0.2s ease;
    padding: 0.7em;
    color: white;
    cursor: initial;
    z-index:-1;
}
li:hover .sub {
    visibility: visible;
    opacity: 0.9;
    transition-delay: 0s;
}