0

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

2 番目のレベルは問題なく表示されます。ただし、3 番目のレベルはまったく表示されません。誰かが理由を知っていますか？

更新: 第 3 レベルのli要素は、少なくとも私が見ているものから、親要素から悪いものを拾っていないようです。

4

2 に答える 2

1

これをcssに追加します

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

デモ

于 2013-07-19T21:58:07.847 に答える
0

それはうまくいきません。それを処理するには、不透明度または絶対配置を使用する必要があります。

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

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

または #navbar ul li ul { opacity: 0; }

#navbar ul li:hover > ul{
opacity: 1;
}
于 2013-07-19T21:55:42.883 に答える