Webstyle #02のドロップダウンメニュー

今回はWebstule #02の「blue light」「a tree」「カスタマイズ」「butterfly」に実装されているドロップダウンメニューです。
使用したのはMultilebel Droppdown Menu です。
このメニューのスクリプトは、上のサイトからダウンロードするといいです。
説明も書いてありますが、英語なのであしからず。

「Webstyle #1」シリーズに使用されているドロップダウンメニューのdroppyとよく似ていますが、ちょっと違うのはマウスをメニューの上に持ってきたときのリストの出方です。
droppyはピロンと下にでてくるけど、こちらのメニューは左上から右下へ向かって出てきます。
この出方が気に入って、「Webstyle #1」シリーズで使おうかと思ったけど、あれにはリストの出方が合わない。しかし今回のテンプレではしっくり馴染んでます。

HTMLの構成はどのメニューも同じです。
HTMLもCSSも「Webstyle #01」シリーズと基本は同じなのですが、向こうは幅指定のためのクラスがついていてややこしいので、あらためてこちらのテンプレート用にもう一度書きます。

例によってカスタマイズは長くなるので、メニューのカスタマイズをされたい方は追記からどうぞ。
注）HTMLやCSSはコピーして使えますが、説明のために色文字になっているので、念のために一度メモ帳にコピーしたものをもう一度コピーして貼り付けてください。