Question

我有一个巨大的下拉菜单框阴影有点问题。阴影应显示在＆＃34;第二个列表项＆＃34;上方，并且只有实际：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>项目上投射阴影，因此您可以使用+ css selctor实现目标。它允许您在标记中的下一个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;
}

Answer 2

尝试将z-index添加到悬停...

li:hover #sub {
    visibility: visible;
    opacity: 0.9;
    transition-delay: 0s;
    z-index: 10;

}

让我知道这是否是您正在寻找的......

巨型下拉框阴影

2 个答案: