このデモに基づいて、ベンダープレフィックス付きのcssトランジションを使用しています。これは、現時点ではChrome22以降でのみ機能しているようです。ホバー時にボタン（[ホーム]、[連絡先]、[バージョン情報]）をドロップダウンメニューに変えようとしています。javascriptの使用を避け、CSSですべて実行できるかどうかを確認したいと思います。
z-indexを低い数値（-999）に設定し、ホバー時にそれを高い数値（999）に変更し、トランジションを使用して不透明度を0から1に変更すると、フェードインします。
nav > div div {
z-index: -999;
opacity: 0;
-webkit-transition: opacity 1s ease-in-out;
}
nav > div:hover div {
z-index: 999;
opacity: 1;
}
ここでフィドルを参照してください。
問題は、フェードアウトしないことです。トランジションを変更してz-indexの変更も遅らせると、フェードアウトしますが、（）ではフェードアウトしません-webkit-transition: opacity 1s ease-in-out, z-index 0 linear 1s。ここでフィドルへの変更。
基本的に何が起こっているのかというと、不透明度のフェードは正常に機能しますが、z-indexはどちらかの方向にあまりにも速く移動します。z-indexをまったく使用しない場合、[ホバーミー]ボタンの上ではなく下にホバーするとメニューが開きます。これがそのシナリオを示す別のフィドルです。
ポイントAからポイントBに移動するための1つの遷移と、ポイントBからポイントAに移動するための別の遷移を作成する方法はありますか？要素に別のトランジションを配置して遊んだ:hoverことがありますが、私が知る限り、最初のトランジションをオーバーライドするだけです（「ホバリングしない」から「ホバリングする」へのトランジションがないかのように）。
TL; DR：これ、これ、またはこれを変更して、 （javascriptを使用せずに）「HoverMe」ボタンに（近くだけでなく）ホバーしたときにスムーズに移行する方法はありますか？