html - 悬停时不会出现第二级下拉菜单

Question

JSFIDDLE

我有一个多级下拉菜单，其所有二级（和更高）级别的高度都设置为零，overflow:hidden如您在此处看到的：

/*second level*/
#navbar li ul{
    list-style: none;
    position: absolute; 
    top: 100%;    
    height:0px;
    overflow:hidden;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    transition: all .3s ease-in;
}
/*third level*/
#navbar li ul li ul{
    position: absolute; 
    left: 102%;
    top:0;
    height:0px; 
    overflow:hidden; 
}

在这两个元素的指定悬停上，我将它们的高度设置为 250px。正如您在此处看到的：

#navbar li:hover > ul{
    height: 250px; 
}

#navbar li ul li:hover > ul{
    height: 250px; 
}

第二级看起来就好了。然而，第三层根本没有出现。有谁知道为什么？

更新：第三级li元素似乎没有从父元素中提取任何不好的东西，至少从我所看到的来看。

Answer 1

将此添加到您的CSS

#navbar li ul{
    width:286px;
}
#navbar li ul li ul{
    display:none;
}
#navbar li ul li:hover   ul{
    display:block;
}

演示

Answer 2

那是行不通的。您应该使用不透明度或绝对定位来处理它。

#navbar ul li ul {
position:absolute;
left: -99999px;
}

#navbar ul li:hover > ul {
left: 0px;
}

或 #navbar ul li ul { 不透明度：0；}

#navbar ul li:hover > ul{
opacity: 1;
}