ドロップダウンメニューといえば、リストの中にリストを内包するものがポピュラーですが、 マルチカラム化することでコンテンツを把握しやすいユーザーフレンドリーなナビゲーションにする事ができます。
CSSのpositionプロパティを利用しドロップダウンを表現。以下のブラウザに対応しています。
li要素に:hover疑似クラスを使用しています。IE6で表現する為には、 csshoverなどのJavascriptライブラリを使用する必要があります。
このサイズが1カラム。 個別にスタイル指定できるので、背景にグレーを指定してみました。
通常のスタイルのカラム。通常のスタイルのカラム。通常のスタイルのカラム。
イタリックスタイルのカラム。イタリックスタイルのカラム。イタリックスタイルのカラム。
通常のスタイルのカラム。通常のスタイルのカラム。通常のスタイルのカラム。
ボールドスタイル。ボールドスタイル。ボールドスタイル。ボールドスタイル。
ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。
ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。
ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。
more...
ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。
ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。
ここにテキスト。ここにテキスト。ここにテキスト。ここにテキスト。
more...
「.columns_n」で内包するカラム「.col_n」の n の合計を 「.columns_n」の n に合わせれるだけでOK。