制作者の活動(PR)。

メニューバー全体をあるIDを与えた<ul>要素(今回はMENU_NAVI)とします。
メニューバーの各列はこのIDを与えた<ul>要素直下の<li>要素となります。
メニューバーの各列の見出し(これをポイントするとポップアップメニューが下に出るようになる)は、この<li>要素直下に要素としてマークアップします。
ポップアップメニューは、見出しとなる要素の直後に>ul>要素で記述します。
ポップアップメニュー本体は、原則として<a>要素のみを直下に含む<li>要素の集まりとします。
但し、ポップアップメニューに子メニューを含める場合には、以下のようにします。
1. 子メニューを表示させる項目は要素としてマークアップします。この要素は勿論<a>要素を内容に含める事が出来ます。
2. 子メニューはこの要素の直後に<ul>要素として記述します。
つまり、メニューバーの見出しとメニュー本体と同様に記述する事となります。
- 勿論、同様に子メニューにも孫メニューを、孫メニューにもひ孫メニューをと子孫メニューを記述する事が可能です(余り階層を深くし過ぎると画面に入り切らなくなりますが)。

つまり、<ul>要素の内容となる<li>要素は、どの階層であっても

直下が<a>要素のみからなるもの
直下が要素, <ul>要素の順に並ぶもの

のいずれかと言う事となります。

本頁の目次

具体的なポップアップメニューのマークアップのパターンは、以下のようになります。

具体的なポップアップメニューのマークアップのパターンを読み飛ばす

<ul id="MENU_NAVI">
    <li>
        <p>第一項目の見出し</p>
        <ul>
            <li><a href="…">第一項目のメニュー1</a></ul>
            <li><a href="…">第一項目のメニュー2</a></ul>
            …
            <li>
                <p>子メニューへの見出し</p>
                <ul>
                    <p><a href="…">第一項目子メニュー1</a></p>
                    <p><a href="…">第一項目子メニュー2</a></p>
                    …
                    </ul>
                </li>
            </ul>

    <li>
        <p>第二項目の見出し</p>
        <ul>
            <li><a href="…">第二項目のメニュー1</a></ul>
            <li><a href="…">第二項目のメニュー2</a></ul>
            …
            </ul>
        </lip>

        …
    </ul>

具体的なポップアップメニューのマークアップのパターンはここまで。

見出しと本体と言う関係が並ぶ事から<dl>要素にしても良いのですが、<ul>要素なら各列を一つの要素(ここでは<li>要素)として纏められるのでこちらの方がベターかと思われます。

本頁の目次

ポップアップメニューを実現するスタイル定義。

▲記事先頭
△前項目
▽次項目

スタイル定義自体は実に単純で、

ポップアップメニューの形式に沿ったものを書く
メニューをポップアップさせる項目(ここでは要素)やポップアップメニュー部分(<ul>要素)がポイントされている場合にはポップアップメニューが表示されるようにする

ようにするだけです。

ですが、メニューのスタイルがちょっと複雑ですので、スタイル定義はちょっと長くなります。

また、隣接セレクタや直下セレクタなどが使えれば記述もより単純になるのですが、インターネットエクスプローラ 6.xまではこれらのセレクタが認識出来ないので、なるべく使わないように記述します。

ポップアップメニューを実現するスタイル定義を読み飛ばす

@charset "shift_jis";

/* メニューバー全体。 */
ul#MENU_NAVI {
    width: 98%;
    height: 1.7em;
    background: #030;
    position: absolute;
    left: 0;
    top: 80px;
    margin: 0 0 0;
    padding: 0 0 0 2%;
    }

/* メニューバー内のアンカー。 */
ul#MENU_NAVI a,
ul#MENU_NAVI a:link,
ul#MENU_NAVI a:visited {
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    font-family: "MS UI Gothic", sans-serif;
    }

/* ポップアップメニュー内のアンカー。 */
ul#MENU_NAVI ul a,
ul#MENU_NAVI ul a:link,
ul#MENU_NAVI ul a:visited {
    font-weight: normal;
    color: #000;
    }

/* メニューバー内の各項目。 */
ul#MENU_NAVI li {
    float: left;
    display: block;
    background: transparent;
    list-style-type: none;
    width: 9em;
    margin: 0;
    padding: 0;
    line-height: 1.2em;
    /* 更に下位に子メニューがある場合にその表示位置を決めるためのポジショニング指定。 */
    position: relative;
    top: 0;
    left: 0;
    }

/* メニューバー内の各項目の見出し。 */
ul#MENU_NAVI li p {
    display: block;
    background: #030;
    margin: 0;
    padding: 0.025em 0.1em;
    white-space: nowrap;
    overflow: hidden;
    z-index: 1;
    font-family: "MS UI Gothic", sans-serif;
    line-height: 1em;
    }

/* ポップアップメニュー本体。 */
ul#MENU_NAVI li ul {
    display: none;
    width: 11.25em;
    background: transparent;
    margin: -3em 0 0;
    /* 上下にパディングを付ける事で、カーソルがちょっとはみ出した場合にも消えないようにする。 */
    padding: 3em 0 3em;
    border: none;
    font-size: 100%;
    z-index: 100;
    white-space: normal;
    overflow: visible;
    /* 上パディング分ずらす。 */
    position: absolute;
    top: 1.7em;
    left: 0;
    }

/* ポップアップメニュー本体内の、更に下位のポップアップメニュー。 */
ul#MENU_NAVI li ul li ul {
    position: absolute;
    top: -3.0em;        /* 元のポップアップメニューの表示位置に合わせてずらす。 */
    left: 11.25em;      /* 元のポップアップメニューより右にずらす。 */
    margin: 0 0 0 1px;
    padding: 3em 3em 3em 0;
    width: 11.25em;
    }

/* ポップアップメニュー内の各項目。 */
ul#MENU_NAVI li ul li {
    float: none;
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    background: #fff;
    white-space: normal;
    font-size: 80%;
    line-height: 1em;
    }

/* ポップアップメニューの更に下位にある子メニューで
   文字の大きさが小さくならないようにするための措置。 */
ul#MENU_NAVI li ul li ul li {
    font-size: 100%;
    }

/* ポップアップメニュー内の各項目は原則として<p>要素か<a>要素とする。 */
ul#MENU_NAVI li ul li p,
ul#MENU_NAVI li ul li a {
    display: block;
    width: 10.44em;
    margin: 0 0 -1px;
    padding: 0.4em;
    border: 1px solid #999;
    line-height: 1.2em;
    background: #fff;
    color: #000;
    white-space: normal;
    }

/* ポップアップメニュー内の各項目で<a>要素を含んだ<p>要素とした場合の調整。 */
ul#MENU_NAVI li ul li p a {
    margin: -0.4em;
    padding: 0.4em;
    border: none;
    }

/* ポップアップメニュー内の各項目内のアンカーをポイントしているときのスタイル。 */
ul#MENU_NAVI li ul li a:hover {
    color: #000;
    background: #afc;
    }

/* 子メニューがある事を示す目印。 */
ul#MENU_NAVI li ul li p a:before {
    float: right;
    color: #0c0;
    content: "\2794";    /* 右向きの太い矢印のUCSコード。 */
    font-weight: bold;
    margin: 0;
    padding: 0;
    }

/* ポップアップメニューが表示となる場合。 */
ul#MENU_NAVI>li:hover>p+ul,
ul#MENU_NAVI>li li:hover>ul,
ul#MENU_NAVI>li li>ul:hover {
    display: block;
    }

/* IE 6でのスタイル補正
   ※IE 6では、
   <?xml ?>宣言のあるXHTML文書では非標準レンダリングとなるため、
   widthプロパティ値を補正する必要がある。 */
* html ul#MENU_NAVI li ul li p,
* html ul#MENU_NAVI li ul li a {
    width: 11.25em;
    margin-top: -1px;
    margin-bottom: 0;
    }

* html ul#MENU_NAVI li ul li p a {
    width: 11.25em;
    margin: -0.4em;
    }

* html ul#MENU_NAVI ul ul {
    left: 11.0em;
    width: 11.25em;
    }

ポップアップメニューを実現するスタイル定義はここまで。

ここでは重要と思われる点を中心に解説して行きましょう。

本頁の目次

メニューバー全体のスタイル。

▲記事先頭
△前項目
▽次項目

メニューバー全体のスタイル定義については、文書内の指定された位置に、横幅一杯に描画します。

CSSの標準では、widthプロパティの値には左右のborder-widthプロパティ及びpaddingプロパティの値は算入されない決まりですので、widthプロパティの値は当然左パディング分を差引いた値となります。

本頁の目次

メニューバー内各項目のスタイル。

▲記事先頭
△前項目
▽次項目

メニューバー内各項目のスタイル定義については、floatプロパティを駆使して左から項目を横方向に並べて行きます。

インラインブロック或いはインラインテーブルなどは、少し前のヴァージョンのブラウザで認識されないため、フローティングはブロックレヴェル要素をインライン風に(横に)並べるのに今も便利に使える機能です。

ところで、最後の方にはポジショニング指定が書かれております。

この指定は表示位置を全く動かしていないので意味が無いように見えるかも知れません。

しかし、この結果、<li>要素の下位でposition: absolute; プロパティを与えられた要素(今回の場合はポップアップメニューや子メニューとなる<ul>要素のみ)のポジショニング基準が上位の<li>要素基準となり、従って

ポップアップメニューなら見出し部分の真下に
子メニューなら右隣に

と言った位置指定が出来るようになります。

最上位のポップアップメニューとポップアップメニューの子メニューは表示位置の決め方こそ異なりますが、HTMLでの記述方法は全く同じであるため、セレクタの記述で容易に峻別出来るようになります。

本頁の目次

メニューバー内の各項目の見出し。

▲記事先頭
△前項目
▽次項目

メニューバー内の各項目見出しのスタイル定義については、メニューバーの部分に綺麗に掛かるように工夫します。

フローティングを行うため、widthプロパティで具体的な幅を取っております(※1)が、そのため見出しとなる文字列が長過ぎる場合に問題が生じ得ます。

white-space: nowrap; プロパティで入り切らない場合でも折り返しをしないようにして、更にoverflow: hidden; プロパティではみ出した部分を見えないようにします。(※2)

実は幅を取らなくても第二水準第一改訂版では問題がない事となりますが、widthプロパティを書かないと、見出しが詰まった並びになってポップアップメニューの表示に支障が出るようです。
この辺りの措置には意見が分かれそうな気がします。もし、はみ出しても表示されるようにしたいのであれば、メニューバー内各項目のスタイル定義内のwidthプロパティを同じ値のmin-widthプロパティに換え、こちらのoverflowプロパティの記述を削除するようにすれば良いでしょう。但し、インターネットエクスプローラ 6.0までに対してはその場合でもwidthプロパティを用いる必要があります。

本頁の目次

ポップアップメニュー本体。

▲記事先頭
△前項目
▽次項目

ポップアップメニュー本体のスタイル定義については、ポジショニングを用いて見出し部分の真下に来るようにすれば良いのですが、ここではちょっとした工夫をしております。

それは、ポップアップメニュー本体の上下に三文字分のパディングを与えていると言うものです。

何故こんな事をしたのかと申しますと、こうする事で閲覧者の手が滑ってポップアップメニュー部分からマウスカーソルがちょっとはみ出してしまった場合でもすぐには消えないようにしたかったからです。

パディング部分も要素の領域の一部ですのでこの範囲にカーソルが納まっている限りはCSSでの処理で消えてしまう事はありません。

但し、インターネットエクスプローラなど一部ブラウザで巧く行かない場合があるようです。

尚、パディングを与えた事で、

背景色を透明にしなければならない
上方向のマージン或いはポジショニングをその分調整する必要がある

と言う副作用が生じますが、利便性を優先したかったのでこのようにしております。

また、この段階ではdisplay: none; プロパティを用いて非表示となるようにしておきます。

本頁の目次

ポップアップメニュー本体内の、更に下位のポップアップメニュー。

▲記事先頭
△前項目
▽次項目

ポップアップメニュー本体内の更に下位のポップアップメニュー、すなわち子孫メニューのスタイル定義については、ポップアップメニュー本体とポジショニングの位置を除けば特に代わる部分はありません。

ですので、

確実に子孫メニューのスタイルを指定出来るように適切にセレクタを記述する事と
子孫メニューの表示に相応しいポジショニングをするように指定する

この二点に注意すればよいでしょう。

ただ、それだけでは芸がないので、利便性を高めるためのパディングについて、子孫メニューの場合には上下だけでなく右側にも三文字分与える事とします。

今回は子孫メニューは元のメニューの右に並べるようにしているため、右方向にカーソルを移動させすぎてしまう事が予想されるからです。

本頁の目次

ポップアップメニュー内の各項目。

▲記事先頭
△前項目
▽次項目

ポップアップメニュー内の各項目のスタイル定義自体には特に細かく解説する必要はないと思いますが、二つほど注意点を与えておきます。

一つは、インターネットエクスプローラ 7.0まででは、<a>要素にdisplay: block; プロパティを与えても、横幅をきちんと指定しておかないと、文字のある部分以外をポイントしてもアンカーとして機能しない場合がある事です。

ですので、ポップアップメニュー内の<a>要素にはwidthプロパティで値を指定しておく必要があります。

もう一つとしては、ポップアップメニュー内で子メニューを開ける要素内にアンカーがある場合、マージンとパディングを調整する必要があります。

本頁の目次

子メニューがある事を示す目印。

▲記事先頭
△前項目
▽次項目

子メニューがある事を示す目印のスタイル定義については、:before擬似要素セレクタとcontentプロパティで右を差す太い矢印 ➔ を右にフロートさせます。

実は、CSS第二水準に拠ると、contentプロパティで生成した文字列等はフロート出来ない事とされておりましたが、平成21年11月 1日現在勧告候補となっているCSS第二水準第一改訂版では、contentプロパティで生成した文字列等についての制約が削除されたようです。実際のところ、CSSの標準は既に事実上CSS第二水準第一改訂版に従ったものですので(と言うよりCSS第二水準第一改訂版はCSS第二水準の実装状況を見て改訂しているものですので)、問題はないと言う事になります。