创建三级css手风琴菜单

我已经创建了一个两级CSS手风琴菜单。我现在正在尝试创建第三层。我对该层的css嵌套有一点了解。下面的例子是我的假设。有人知道正确的嵌套方法吗

#main-nav li ul a:hover:before, .subMenu li ul a:hover:before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: rgba(0,0,0,0.75);
    border: 1px solid #FFF;
    position: absolute;
    top: 0.5em;
    left: -0.75em;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

---

以下是一个粗略的概念证明，作为嵌套悬停的“从第一原则”方法：

主要部分是最后一个选择器。它表示，应该显示悬停在上方的

li

的直接子项的任何

ul

第一个选择器隐藏所有子菜单

---

它与基本功能一样简单。修改后，如果您愿意，可以使用任意位置更改和css转换。

您好首先，您有以下属性：

溢出：隐藏

这将隐藏您的形状，并仅将视觉对象显示为箭头，但会隐藏到子菜单。您可能需要找到仅绘制箭头的形状

您也正在设置

#main-nav ul li {
  position:relative;
}

删除此项，子菜单可以是上一个菜单的100%高度

在这个选择器上：

 #main-nav li:hover  ul

添加

仅影响

#main nav li

的直接子级

ul

，而不是所有内部ul：

#main-nav li:hover > ul

演示

编辑

---

您可以在此处看到如何获取，检查此新的

在第61行尝试此更改溢出（或删除它）：

要确保锚点悬停时左箭头溢出，只需在CSS“style.CSS”的第71行添加overflow:hidden to taht anchor

同时从li元素中移除相对位置，以将子ul与父ul顶部对齐 因为第41行有一个边框顶部，所以必须添加此项，以便从顶部对齐所有3个ul：

#main-nav ul ul ul {top:-1px}

希望我没有忘记什么。

---

不管怎样，你的问题只是溢出：）其他的东西只是表面上的改变

它们在鼠标上方打开，对吗？我可以试试

#main nav li:hover>ul

是的，它们在鼠标上打开，或者选择器说：如果我在

#main nav

中，并且我正在浏览一个列表项，给我

ul

，这是直接的子项。然后你可以把它展示出来/hide@Tim对不起，我不太明白，你能用jsfiddle演示一下吗？我把它作为一个答案贴了出来。如果我能澄清，请告诉我。

#main-nav li:hover > ul

#main-nav li ul, .subMenu li:hover ul {overflow:hidden;}

#main-nav li ul a, .subMenu li ul a {overflow:hidden;}

#main-nav ul ul ul {top:-1px}