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;
}

Demo