javascript - Z-Index 不适用于下拉列表中的 UL LI

Question

我有一个向左打开的下拉菜单，但它显示在内容下方。我尝试将内容 z-index 更改为 1，将下拉菜单更改为 2。但它不起作用。

这也是 jsFiddle 示例。 https://jsfiddle.net/dgy95y8q/8/

未折叠时的导航栏 CSS:

.navmenu {
    width: 0px;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fff;
    text-align: center;
    position: fixed;
    left: 180px;
    top: 25px;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 300ms ease;
    z-index: 0;
    transition: all 300ms ease;
}

折叠后:

.navmenu.opened {
    visibility: visible;
    opacity: 1;
    width: 240px;
    z-index: 1;
}

主要内容包裹CSS:

.main {
    float: left;
    width: 85%;
    background-color: rgb(255,255,255);
    position: relative;
    z-index: 2;
}

Answer 1

只需将 .sidebar-left z-index 更改为 2