[ CSS ] 縦方向メニューのサンプル

今更ですが、CSS で縦方向メニューのサンプルを書いてみました。

↑ 完成イメージ

サンプル

• サンプルファイル

主要部分の HTML のコード

<div id="menu">
    <ul>
        <li><a href="#"><img src="menu_button.gif" /></a>
            <ul>
                <li><a href="#">サンプルのリスト</a></li>
                <li><a href="#">サンプルのリスト</a></li>
                <li><a href="#">サンプルのリスト</a></li>
            </ul>
        </li>
        <li><a href="#"><img src="menu_button.gif" /></a>
        <li><a href="#"><img src="menu_button.gif" /></a>
        <li><a href="#"><img src="menu_button.gif" /></a>
        <li><a href="#"><img src="menu_button.gif" /></a>
    </ul>
</div>

CSS のコード

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu ul li {
    line-height: 0;
}
#menu ul li a img {
    vertical-align: bottom;
}
#menu ul li ul {
    margin: 10px 0 15px 0;
}
#menu ul li ul li {
    background-image: url(menu_bullet.gif);
    background-repeat: no-repeat;
    background-position: 0 0.5em;
    padding-left: 0.75em;
    margin-left: 10px;
    line-height: 1.5;
}
#menu ul li ul li a {
    text-decoration: none;
}

ハマった所

vertical-align: bottom; がないと Inter Explorer 5.5, 6, 7 でボタンの下に隙間ができます。

こんな感じ。二時間ぐらいハマったよ。チクショー。

img { vertical-align: bottom; } は初期化する CSS ファイルに書いておいたほうが良さげ。

関連する記事

• [ JavaScript ] jQuery でテーブルのセルをストライプ ( しましま ) にするサンプル (0)
• [ CSS ] ３カラムの CSS を書いてみた (0)
• [ CSS ] 行頭をインデントするサンプル (2)
• [ CSS ] 画面の中央にブロック要素を配置するサンプル (2)
• [ CSS ] 指定した要素の後に属性値を表示する :after と content と attr() のサンプル (1)