带阴影的弯曲菜单隐藏子菜单

Question

我们想在菜单的底部应用弯曲的阴影线（见图）。 此阴影/曲线必须位于子菜单的前面。因此阴影与子菜单重叠。这是问题所在，因为当我们将鼠标悬停在子菜单上时，子菜单将消失。 这是因为包装器获得了更高的Z-Index然后是子菜单。

#header {
    width: 100%;
    height: 153px;
    background: url("/public/images/headerBackground.png") no-repeat center center;
}

#header .wrapper {
    position: relative;
    left: 50%;
    margin-left: -470px;
    z-index: inherit;
    pointer-events: all;
}

#navigation li ul {
        display: none;
        position: absolute;
        z-index: -1;
        background-color: #c40b29;
        -webkit-box-shadow: 0px 1px 30px 18px rgba(46, 50, 50, 0.3);
        -moz-box-shadow:    0px 1px 30px 18px rgba(46, 50, 50, 0.3);
        box-shadow:         0px 1px 30px 18px rgba(46, 50, 50, 0.3);
        float: left;
        width: 152px;
        height: 166px;
        margin-left: 0px;
        margin-top: -2px;
}

对于我们获得的设计图像： http://s18.postimg.org/uiaf1waxl/Schermafbeelding_2014_03_17_om_16_10_26.png