jQuery slideUp slideDownがうまく動かない現象

個人的に結構悩んだので、そのメモです。

WordPressのカスタムメニューのドロップダウンメニューをslideUpとslideDownでアニメーションにしようと思ったんです。
セレクタが少し違ってたりしますが、コードはだいたいこんな感じです。

$('ul li').hover(function(){
  $('>ul:not(:animated)', this).slideDown('fast');
}, function(){
  $('>ul', this).slideUp('fast');
});

メニューが表示されっぱなしなこともあるので.hide()で適宜隠してあげましょう。
これを動かすとドロップダウンメニューがするーっと降りてくるはずなんですが、なぜか瞬時に表示されるという現象に悩まされました。

Chrome、IEではまったく動作せず瞬時表示。
Firefoxでは1回マウスオーバーした後にもう一度マウスオーバーするとなぜか動作するようになります。

ではなぜ動かなかったかといいますと、これはドロップダウンメニューに関わるul要素がブロックレベル要素（display:block）になっていたのがだめなんだそうです。
というわけでドロップダウンメニューに関わるul要素を全部インラインレベル要素（display:inline）にしてあげるとすんなり動きました。
結局jQueryが主な問題ではなく、CSSをちょこっと書き換えただけです。

なんてことない些細な問題ですが、解決するためにかなりの日数を費やしました・・・
Stack Overflowでめちゃくちゃ探してようやく解決方法を見つけましたよ。
ほんとウェブ制作は地味なことの繰り返しです。