jQueryを使ったドロップダウンメニューのサンプルページ(多段)

• HOME
• ニュース
  • 新製品 »
    • ハードウェア
    • ソフトウェア
  • 新サービス
  • 弊社について
• 製品・技術
  • ハードウェア »
    • 法人向け
    • 個人向け
  • ソフトウェア »
    • for Windows
    • for Mac
    • for Android
    • for iOS
    • その他
  • ウェブサービス
• 会社情報
  • 会社概要 »
    • グループ概要
    • 本社概要
  • 社長挨拶
  • 沿革
  • 所在地 »
    • 本社
    • 支社
• お問い合わせ
  • よくあるご質問 »
    • サービスに関して
    • 弊社に関して
    • その他
  • お問い合わせ先 »
    • 大阪本社
    • 支社 »
      • 神戸支社
      • 京都営業所
      • 奈良営業所

jQueryを使ったドロップダウンメニュー(3階層)のサンプルです。
マウスを載せるだけでサブメニューが開きますが、マウスをメニュー領域外へ移動させてもあえて自動では閉じない仕組みになっています。具体的には、以下の規則で動作します。

• 一度開いたサブメニューは、
  1. 他のメニュー項目に属するサブメニューを表示させるか、
  2. ウェブページ上のどこかをクリックするまで、
  ずっと表示され続けます。

メニュー構造はHTMLのリスト(ul要素やli要素)で作成し、メニューらしく見える装飾にはCSSを使用し、サブメニューの開閉にはJavaScriptのライブラリjQueryを利用しています。
詳しい作り方や構造の解説に関しては、記事「簡単なドロップダウンメニューの作り方(jQuery活用編)」の本文をご参照下さい。