html - 折叠导航栏中的子菜单项

Question

我有以下菜单

(我不知道为什么它在折叠时不显示 3 个图标栏，但它们在那里，因此您可以将鼠标悬停在它上面并单击它，它会打开)

code

https://jsfiddle.net/x4mcq4h7/13/

我的问题是，当我将鼠标悬停在具有子菜单 (yogastyles) 的列表项 (yogaclasses) 上时，我实际上无法点击它，因为只要我用鼠标点击它，它就会消失。

我试图改变我拥有的 CSS，但没有成功，我也不知道我应该寻找什么或在哪里改变它......

我希望它表现得像当您浏览父列表项时，它会在底层列表项(事件菜单)上显示子菜单，这样您就看不到事件菜单文本，那么当然实际上是能够点击它:)

如果有人能在正确的方向上帮助我，我将不胜感激!

Answer 1

您需要添加工作正常的 z-index 并使该链接可点击，

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #CECB26;
    min-width: 180px;
    border-radius: 4px;
    z-index:9;/*Add this*/
}

检查此更新 jsFiddle