html - ドロップダウン メニューの遷移が遅い CSS

Question

JS fiddleにドロップダウン メニューを作成しました。

ドロップダウン メニューの遷移を遅くしたい。

現在、それは飛び出すだけで、そのようにかなり当たり障りのないものに見えます。

// Ignore this line

Answer 1

この例を自分のベースとして使用する必要があるようです

また、id が main-nav-menu の通常のタグではなく、タグを使用することをお勧めします。

背景画像を使用して青い背景を作成していますか? 背景画像を使用する代わりに、li 要素と a 要素に css で色を指定するだけで、目的を達成できます。

使用するコードは次のとおりです: http://www.newmediacampaigns.com/blog/nicer-navigation-with-css-transitions-part-2

それぞれの外観は次のとおりです。http://codepen.io/toddsynan/full/pJuyx

以下は、ホバリングによって最大高さが 0 から 150px に変化したときにトランジションを作成するために男が使用するものです。

 -webkit-transition:max-height 500ms ease;
 -moz-transition:max-height 500ms ease;
 -o-transition:max-height 500ms ease;
 transition:max-height 500ms ease;