0

作業中の Web サイトで動作するように移行できません。ナビゲーション メニューの表示と非表示は正しく行われますが、遷移せずにすぐに表示されます。CSS は次のとおりです。

.nav ul li ul li {
    display:none;
    visibility:hidden;
    transition: all 0.5s ease;
}
.nav ul li:hover > ul 
{
    transition: all 0.5s ease 0s;
    display:block;
    visibility:visible;
}

HTMLは

<div class="nav">
    <ul>
        <li>test</li>
        <li>test
            <ul class="sub-menu">
                <li>test</li>
            </ul>
        </li>
    </ul>
</div>

私はクロム、ffx、つまりでテストしました。

私は実際にこのコードのほとんどをこのサイトの別の回答から取得したので、ここで何が問題なのかわかりません。

言及する必要がありましたが、他の回答から不透明度を試しましたが、ドロップダウンメニューでは、メニューがそこにとどまっているため機能しません。

4

3 に答える 3

2

display: noneからへの遷移は、display: block期待どおりに動作しません。

代わりに使用しopacityてください。

jsFiddle デモ

于 2013-09-14T09:33:47.730 に答える
0

このCSSを試してみてください。これはうまくいきます

.nav ul li > ul {
   opacity:0;
    overflow:hidden;
     transition: all 0.5s ease;
}
.nav ul li:hover > ul 
{
    transition: all 0.5s ease 0s;
    height:auto;
    opacity:1;  
}

デモはこちら

于 2013-09-14T09:48:57.160 に答える
0

display プロパティはトランジションでは機能しません。

提案されたものは有効であり、他のプロパティ (位置?) を使用して、目的の効果を生み出すことができます。

于 2013-09-14T09:45:39.050 に答える