2017.11.06jQueryで6行程度で、コピペでも実装できます。デモはこちらコードは以下のようになります。);});HTMLについての解説ナビゲーションの中にサブナビゲーションが入っているのでulタグを入れ子にしています。それ以外、特段変なHTMLにはしていません。第1階層のリストにspanが入っているのはデザイン上のものなので必須ではありません。装飾的な内容の解説は省いて、構造について説明します。リセットCSSは各自適当に当てて下さい。leftを掛けて、横幅を200px、高さを60pxで決めてます。この横幅などに関しては中に入るテキストなどで変わって来るでしょう。relativeを第2階層をabsoluteにするために指定しています。absoluteを指定していますが、これは第2階層が親よりも横幅が長くなった時に位置をずらしたり、第1階層との位置関係を調整するのに何かと便利なので入れています。なくても問題はありません。noneで非表示にしています。...});は言わずもがなドキュメントの読み込みが終わったら実行してね、というjQueryの基本的な関数です。li").hover(...);でfadeクラスの子要素のliタグ(ここの場合は第1階層のliタグ)にホバーしたら...の内容を実行してね、というイベントです。今回はhover()は第1引数と第2引数に関数を渡しています。第1引数はマウスがホバーした時、第2引数はマウスが離れた時の処理になります。hoverメソッドは引数1つでホバー時・離れた時の挙動を記述することもできますが、それぞれの挙動を少し分けるために今回は2つ引数を渡しています。.fadeIn(500);}thisはホバーした要素、つまり第1階層のliを表し、findメソッドで子要素でsecondary_navというクラスの要素を見つけます。stopメソッドでアニメーションを止め、fadeInメソッドで500ミリ秒でふわっと表示されるようにしています。stopメソッドを使うのかは後述します。.fadeOut(500);};第2引数も第1引数と同じような感じですが、stopメソッドがないのと、fadeInがfadeOutになっています。動作としても第1引数との逆でマウスが離れると500ミリ秒でフェードアウトします。.stop(true)第1引数にいれたstopメソッドですが、これがないと、連続でホバーした際に、アニメーションがホバーした回数だけ繰り返されてしまいます。それを止めるためにstopメソッドを挿入しています。stopメソッドには2つの引数(真偽値)を渡せますが、ストップする挙動に違いがあります。stop(true,true)でも問題ありませんが、その挙動に関しては好みの問題かなと思います。(スライドのような単純な動きではなく、複雑なアニメーションをする時は使い分ける必要があるかと思います)。stopメソッドの挙動の違いについては以下のページに詳しく書かれています。slideUpに書き換えるだけです。);});jQueryでやる利点ドロップダウンメニューはCSSのみで作るやり方もありますが、jQueryでやる利点は約6行追加するだけで良いこと、表現を変えたくなったらすぐ変えられる点です。フェードからスライドに変えたくなってもfadeInをslideDownに変えればすぐ反映できます。動きをCSSから分離できるので、デザイン上のCSSとあまり干渉しない点もあります。