【jQuery】多階層のマウスオーバードロップダウンメニューを作りました [IE9対応]

04

仕事で必要だったため作りました。
作った後に気づいたことですが、西畑一馬氏のコードとほぼ同一のものとなっています。

検証済みブラウザとOS

  • IE 9~
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X El Capitan

 

要点とコード

code

  • CSS / jQuery ともに直下セレクタで区切り、子孫要素への伝播を防ぐ
  • 最初のドロップダウンの ul タグには .level1、以降のドロップダウン全ての ul タグには .level2 を指定し、CSS管理をわかりやすく
  • 最上階のリストを除く li タグに position: relative; を指定し、level1 / level2 に position: absolute; を指定することで、各要素に隣接したドロップダウンが出来る

    • このエントリーをはてなブックマークに追加