html - :hover の CSS アニメーション Nav 要素

Question

標準のネストされた UL ナビゲーション構造と、サブナビゲーションをアニメーション化するための CSS があり:hoverます...

このフィドルを参照してください: http://jsfiddle.net/5kwsV/

最も深い UL のアニメーションを除いて、すべてが期待どおりに機能しています。最初のサブナビゲーションは高さをアニメーション化し、2 つ目のサブナビゲーションは幅のみをアニメーション化する必要があります。

これは、私が問題を抱えている最も深い UL のアニメーションを処理するコードです。

nav ul li > ul > li > ul {
    position: absolute;
    display: block;
    visibility: hidden;
    width: 0px;
    height: auto;
    top: 0;
    left: 100px;
    padding: 0;
    margin: 0;
    -webkit-transition: all 0.6s ease;
       -moz-transition: all 0.6s ease;
        -ms-transition: all 0.6s ease;
         -o-transition: all 0.6s ease;
        transition: all 0.6s ease;
}

nav ul li > ul > li:hover > ul {
    position: absolute;
    display: block;
    visibility: visible;
    width: 100px;
    height: auto;
    top: 0;
    left: 100px;
    padding: 0;
    margin: 0;
    -webkit-transition: all 0.6s ease;
       -moz-transition: all 0.6s ease;
        -ms-transition: all 0.6s ease;
         -o-transition: all 0.6s ease;
        transition: all 0.6s ease;
}

上記のコードの問題は、"Michael" ナビゲーション ラベルにカーソルを合わせると、幅と高さがアニメーション化されることです。幅のみをアニメーション化する必要があります。「all」を「width」に変更すると、解決策はかなり明白に見えます。

Si 私はこれを変更します...

    -webkit-transition: all 0.6s ease;
       -moz-transition: all 0.6s ease;
        -ms-transition: all 0.6s ease;
         -o-transition: all 0.6s ease;
        transition: all 0.6s ease;

これに...

    -webkit-transition: width 0.6s ease;
       -moz-transition: width 0.6s ease;
        -ms-transition: width 0.6s ease;
         -o-transition: width 0.6s ease;
        transition: width 0.6s ease;

これで、ホバリングすると、アニメーションは幅 0 ～ 100px でアニメーション化されます。新しい問題は、別のナビゲーション ラベルに移動すると、100px から 0px にアニメーション化されるはずですが、代わりにそこで点滅することです。

私は何が欠けていますか？私の人生でそれを見ることはできません。