html - 菜单链接在父负 z-index 容器中不可点击。

Question

我需要像图片一样设计菜单。到目前为止，我已经通过边框半径和负图层实现了它，但是无法单击第四个和第五个菜单项。需要你的建议。这是 DEMO

要实现的菜单设计:

Answer 1

我通过向类中添加以下属性解决了这个问题。由于“第三菜单”位于所有菜单(层)的顶部，因此“第二菜单”和“第四菜单”在同一级别。同样，“第一菜单”和“第五菜单”也具有相同的层级。在这里我是如何实现它的。

.menu div.three{
    position: relative;
    z-index: 3;
}
.menu div.four{
    position: relative;
    z-index: 2;
}
.menu div.five{
    position: relative;
    z-index: 1;
}

这是更新的 DEMO