Question

我有一个多级下拉菜单，其所有次级（和更高级别）级别的高度设置为零，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

Answer 2

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

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

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

OR #navbar ul li ul { 不透明度：0; }

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

悬停时不会显示第二级下拉菜单

2 个答案: