今更ですが、CSS で縦方向メニューのサンプルを書いてみました。
↑ 完成イメージ
サンプル
– サンプルファイル
主要部分の HTML のコード
<div id="menu">
<ul>
<li><a href="#"><img decoding="async" 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 decoding="async" src="menu_button.gif"></a>
</li><li><a href="#"><img decoding="async" src="menu_button.gif"></a>
</li><li><a href="#"><img decoding="async" src="menu_button.gif"></a>
</li><li><a href="#"><img decoding="async" src="menu_button.gif"></a>
</li></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 ファイルに書いておいたほうが良さげ。