无法在仅限CSS的菜单中添加第二个子级菜单

Question

好的，我已经在这一段时间了，我的菜单显示正确的父母和孩子..但我想添加第二级别的孩子，我无法让他们显示。我认为这是添加正确的CSS并为其添加额外UL LI的问题..但显然我错了。

菜单住在这个jsfiddle - http://jsfiddle.net/Q2tAk/

忽略边距，它们看起来很好，结合其他css ..我只是不能得到第二个子级菜单显示..我认为它类似于other question on stackoverflow，但到目前为止没有.. < / p>

Menu
   -- Child
       -- sub-child

Answer 1

你几乎就在那里，你需要在>而不是<li>

上使用css选择器<a>

例如：

.first-level li > ul.second-level{
    display:block;
}

.second-level li > ul.third-level{
    display:block;
}

希望能帮到你

Answer 2

这是jsFiddle of the 2nd submenu showing

这个问题是双重的。首先，第二个子级别没有显示，因为它隐藏在第一个子菜单后面。发生这种情况是因为它们都使用绝对定位位于相同位置。为了解决这个问题，我将嵌套的“#menu li ul”改为以相对的方式定位：

#menu li ul {
    position: relative; /*Changed*/
    overflow: hidden;
    display: none;
    ...

第二个问题是，当触发“#menu li：hover ul”事件时，第一个和第二个子菜单都显示出来。为了解决这个问题，可以插入一个直接子选择器，以便只显示悬停的li的直接ul子项：

#menu li:hover > ul {
    display: block;
}