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

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

↑ 完成イメージ

この記事の目次非表示

サンプル

サンプル

主要部分の HTML のコード

<div> <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;
}